了解Vuex
在Vue中，多組件的開發(fā)給我們帶來了很多的方便逛绵，但同時當(dāng)項目規(guī)模變大的時候怀各，多個組件間的數(shù)據(jù)通信和狀態(tài)管理就顯得難以維護(hù)，Vuex就此誕生术浪！應(yīng)用統(tǒng)一的方式進(jìn)行處理瓢对，在后期維護(hù)的過程中數(shù)據(jù)的修改和維護(hù)就變得簡單而清晰了。用戶界面負(fù)責(zé)觸發(fā)動作（Action)進(jìn)而改變對應(yīng)狀態(tài)（State）胰苏，從而反映到視圖（View）上硕蛹。
安裝:npm install --save vuex
引入
import Vue from 'vue';
import Vuex from 'vuex';
//模塊化編程，這一句是必須的
Vue.use(Vuex)
State
State負(fù)責(zé)存儲整個應(yīng)用的狀態(tài)數(shù)據(jù),使用this.$store.state直接獲取狀態(tài)
export default new Vuex.Store({
state: {
//state定義狀態(tài)的值,可以理解為定義了各個變量
"name":"子圓",
"age":"18",
"sex":"男",
}
}
store可以理解為一個容器，包含著數(shù)據(jù)中的state等
Vuex.Store({
state,
actions,
mutation
});
Mutations (Vuex提供的修改狀態(tài)值的方法,只能是提交mutation)
changeName(state,preload){},接收兩個參數(shù)妓美，state和載荷(這個值是可以通過提交mutations時傳入)這里面不允許做異步操作僵腺。
export default {
changeName(state, preload) {
state.name = preload.name;
state.age = preload.age;
},
changeAge(s, p) {
s.age = p;
},
}
Actions
Actions也可以用于改變狀態(tài)鲤孵，不過是通過觸發(fā)mutation實現(xiàn)的壶栋，重要的是可以包含異步操作。其輔助函數(shù)是mapActions與mapMutations類似普监，也是綁定在組件的methods上的贵试。如果選擇直接觸發(fā)的話，使用this.$store.dispatch(actionName)方法凯正。
methods:{
onClick(){
//通過this.$store.commit提交mutations,第一個參數(shù)為mutations的名字毙玻，第二個參數(shù)為提交的載荷
//this.$store.commit("changeName",{name:'子圓3',age:'38'});
//分發(fā)action
this.$store.dispatch("actionName");
}
}
Getters
vuex版的計算屬性
getters:{
//vuex版的計算屬性
personInfo(state){
return state.name+"的年齡是"+state.age+"歲";
}
}
