Vuex的this.$store.commit和在Vue項目中引用公共方法

 

2018年11月22日 20:50:29 Funfction_Zero 閱讀數 3230

 

一、在Vue項目中引用公共方法

做爲一個新人小白，在使用vue的過程當中，不免會遇到不少的問題，好比某個方法在不少組件中都能用的上，若是在每一個組件上都去引用一次的話，會比較麻煩，增長代碼量。怎麼作比較好呢，話很少說直接看代碼把

首先 要在main.js中引入公共js。而後，將方法賦在Vue的原型鏈上。像圖中這樣。

 
而後在須要的組件上去引入這個方法

mouted (){
//調用方法
this.common.login();
}

/**而後公共方法裏寫一段簡單的代碼*/
export default{
login:function(){
console.log('這是一段代碼')
}
}

二、Vuex中的this.$store.commit

衆所周知，在vue的項目裏父子組件間能夠用props 或者 $emit 等方式 進行數據傳遞，而若是項目稍微大一點的話有不少平行組件，這個時候在這些組件間傳遞數據，使用這些方法會比較麻煩，代碼也會變得不利於服用。

咱們能夠vuex來解決這個問題
vuex其實官網上不是太好理解,能夠直接看看代碼怎麼實現的。

首先仍是要先安裝vuex
能夠建立一個單獨的store文件目錄，裏面專門存放相關的文件
而後新建index.js文件。

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { // 初始化全局的一個變量 testTxt: {"tips":"這是一條vuex的數據","id":1} } }) export default store

而後在main.js/main.ts 中註冊store

import Vue from 'vue' import App from './App' import router from './router' import store from './../store/index' /* eslint-disable no-new */ new Vue({ el: '#app', router, store, template: '<App/>', components: { App } }) 

接下來在組件中使用

export default { ... data(){ value : "這又是修改後的value", }, computed: { getTxt() { return this.$store.state.testTxt.tips; } }, methods: { modifyTxt: function() { this.$store.commit('modifyTips', this.value) } } ... } 

而後在index.js文件裏能夠修改

const store = new Vuex.Store({ state: { // 初始化全局的一個變量 testTxt: {"tips":"這是一條vuex的數據","id":1} }， mutations: { modifyTips(state,msg) { state.testTxt.tips= msg; } } }) export default store 

 

固然了，vuex的版本確定是越新越好