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

 

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

 

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

作為一個新人小白，在使用vue的過程中，難免會遇到很多的問題，比如某個方法在很多組件中都能用的上，如果在每個組件上都去引用一次的話，會比較麻煩，增加代碼量。怎么做比較好呢，話不多說直接看代碼把

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

 
然后在需要的組件上去引入這個方法

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

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

2、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的版本肯定是越新越好