一、引言

在Vue.js的元件基礎中，我們在兩個元件之間傳值使用的是props（父元件向子元件傳值），自定義事件this.$emit方法（子元件向父元件傳值），對於簡單的元件比較少的，而且依賴不復雜的我們可以使用，但是，如果元件很多，而且依賴很複雜，兩個元件不一定是父子關係，而且關係比較遠的時候，如果我們還是使用傳統的傳值方式，那將會是一場災難（兩個距離比較遠的元件如果使用傳統方式，需要透過可能比較多的中間元件進行傳值），因此Vuex誕生了，Vuex可以看作是一個基於快取的狀態管理工具，我們在其store中儲存相應的data屬性傳和方法，兩個元件不論是何處，都透過中間的Vuex來傳遞數值和方法，這樣我們就從混亂中解放了。

二、Vuex的安裝及配置

安裝vuex

cnpm i vuex -D

根目錄下新建sore資料夾，在其中新建index.js

import Vue from 'vue';import Vuex from 'vuex'; Vue.use(Vuex)

在main.js中引入這個index.js，並註冊vuex

import Vue from  'vue'import VueRouter from 'vue-router'//引入vuex的index.jsimport store from './vuex/store/index.js' Vue.use(VueRouter) var router = new VueRouter({    }) new Vue({      el: '#app',      router,      store,//使用store})

三、state狀態物件

state狀態物件，管理一組變數的值，我們通常使用的是將其賦值給元件中data屬性，有三種方法。

var store = new Vuex.Store({     state:{        msg:"Vuex's msg"     }});export default store

1.透過computed的計算屬性直接賦值

當state物件發生變化時，就會重新計算，因此data中獲得的資料一定是最新的。

computed:{   msg(){       return this.$store.state.msg;}

2、透過mapState的物件來賦值

import {mapState} from 'vuex'; computed:mapState({       msg:state=>state.msg  //傳入state物件，將state.msg賦值給msg})

3.透過mapState的陣列來賦值

上面的第二種的簡寫方式，推薦此方式

import {mapState} from 'vuex'; computed:mapState(["msg"])

四、mutations修改state狀態

如果需要修改state中的狀態值，我們需要透過mutations定義方法來修改

引數第一個是state，第二個才是傳入的值，可以是一個單傳或者一個物件，如果是多引數一定要組成物件

var store = new Vuex.Store({     state:{        msg:"Vuex's msg"     },     mutations:{        updateMsg(state,str){            state.msg += str;        },});export default store  //以下為虛擬碼object={msg:'str",age:20} updateMsg(state,object){            state.msg += object.msg;        },

在元件中使用

<button @click="$store.commit('updateMsg','newVal')">修改msg</button>

同樣我們也可以使用其簡寫方式

//元件中引入mapMutationsimport { mapState,mapMutations } from 'vuex'; //methods中註冊mapMutations中的方法methods:{       mapMutations([            'updateMsg'   }]), //直接使用mapMutations中的方法<button @click="reduce('newVal')">修改msg</button>

五、getters屬性

在獲取state中資料之前對資料進行加工。

var store = new Vuex.Store({     state:{        msg:"Vuex's msg"     },     getter:{        msg:state -> state.msg + "newVal";});export default store //在vue 的構造器裡邊只能有一個computed屬性，如果你寫多個，只有最後一個computed屬性可用，所以要對computed屬性進行一個改造，使用運算子”…”。computed:{        ...mapState(["msg"]),        msg(){            return this.$store.getters.msg;        }}, //簡寫方式import { mapState,mapMutations,mapGetters } from 'vuex'; computed:{       ...mapGetters(["msg"]),},

六、actions非同步修改state狀態

var store = new Vuex.Store({     state:{        msg:"Vuex's msg"     },     actions:{        //context理解為store本身，        //使用commit方法呼叫mutations裡邊的方法        updateAction(context){          context.commit('updateMsg','newVal')        },        //方法2，直接傳入commit物件         updateAction({commit}){           commit('updateMsg','newVal')        }});export default store

使用方法

import { mapState,mapMutations,mapGetters,mapActions } from 'vuex';  //methods中註冊mapMutations中的方法methods:{       ...mapMutations([            'updateMsg'        },       //註冊actions       ...mapAction([          'updateAction'      ])]), //html中直接使用 <button @click="updateAction">按鈕</button>

七、module模組組

隨著專案的越來越大，我們共享的狀態會越來越多，這時我們就需要把狀態及其操作進行分組。

const moduleA={     state,mutations,getters,actions} const moduleB={     state,mutations,getters,actions} export default new Vuex.Store({        modules:{a:moduleA},        modules:{b:moduleB},}) //合併寫法export default new Vuex.Store({        modules:{                a:{                     state,mutations,getters,actions                  },                b:{                     state,mutations,getters,actions                  }                },})  <h1>{{$store.state.a.msg}}</h1>computed:{        msg(){            return this.$store.state.a.msg;        }},