vuex2.0 基本使用--- mutation 和 action
http://www.cnblogs.com/SamWeb/p/6543931.html(借鑒處)
如果是組件與組件之間的通信非常復雜,不光是父子組件,還有兄弟組件硝训,那就需要用到狀態(tài)管理锨匆,vuex
1, mutation
The only way to actually change state in a Vuex store is by committing a mutation, 在vue 中,只有mutation 才能改變state. ?mutation 類似事件姜性,每一個mutation都有一個類型和一個處理函數(shù)瞪慧,因為只有mutation 才能改變state, 所以處理函數(shù)自動會獲得一個默認參數(shù) state.?所謂的類型其實就是名字,action去comit 一個mutation, 它要指定去commit哪個mutation, 所以mutation至少需要一個名字部念,commit mutation 之后弃酌, 要做什么事情氨菇,那就需要給它指定一個處理函數(shù), 類型(名字) + 處理函數(shù)就構(gòu)成了mutation. 現(xiàn)在store.js添加mutation.
需要一個狀態(tài)管理矢腻,按照一定的機制把你的變量變換成vue內(nèi)部的模型门驾。這個東西就是vuex。因為約定比較多多柑,略顯復雜點奶是,但是耐心看一下還是很容易接受的。它主要分四個部分竣灌,state,getters,mutations,actions聂沙。先定義一個user.js如下:
而getters顧名思義就是獲取接口,mutations(突變)這個詞有點唬人初嘹,其實就是setters嘛及汉。里面的方法自帶state參數(shù)。而actions就是mutations的異步方法屯烦。
state就是我們放共享變量的地方坷随。比如下面的userInfo.
import Vue from 'vue';
import Vuex from'vuex';
Vue.use(Vuex);
const userStore=newVuex.Store({
state:{
userInfo:{
userName:""
}
},
getters:{
getUserInfo(state){
returnstate.userInfo;
}
},
mutations:{
setUserInfo(state,userInfo){
state.userInfo=userInfo;
}
},
actions:{
setUserInfo({commit}){
commit('setUserInfo');
}
}
})
exportdefaultuserStore;
自己初期項目中的實例。