Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。

以上是vuex的官方文檔對vuex的介紹，官方文檔對vuex的用法進行了詳細的說明。這里就不再細講vuex的各個用法，寫這篇博客的目的只是幫助部分同學更快地理解并上手vuex。

為什么要用vuex

不知道現在讀這篇博客的同學是否有看過Vue2.0子父組件之間通信，子父組件之間的基本通信方式。我們通信的目的往往就是在組件之間傳遞數據或組件的狀態（這里將數據和狀態統稱為狀態），進而更改狀態。但可以看到如果我們通過最基本的方式來進行通信，一旦需要管理的狀態多了，代碼就會變得十分混亂。對所有狀態的管理便會顯得力不從心，尤其是多人合作的時候。

此時vuex出現了，他就是幫助我們把公用的狀態全抽出來放在vuex的容器中，然后根據一定的規則來進行管理

Vuex的核心

vuex由以下幾部分組成：

state mutations getters actions modules

state里面就是存放項目中需要多組件共享的狀態

mutations就是存放更改state里狀態的方法

getters就是從state中派生出狀態，比如將state中的某個狀態進行過濾然后獲取新的狀態。

actions就是mutation的加強版，它可以通過commit mutations中的方法來改變狀態，最重要的是它可以進行異步操作。

modules顧名思義，就是當用這個容器來裝這些狀態還是顯得混亂的時候，我們就可以把容器分成幾塊，把狀態和管理規則分類來裝。這和我們創建js模塊是一個目的，讓代碼結構更清晰。

實例來理解Vuex

// 實例化vuex狀態庫var vuexStore = new Vuex.Store({ state:{  message:'Hello World',  bookList:[   {    name:'javascript權威指南',    price:100,    en:'jq'   },   {    name:'angularjs權威指南',    price:80,    en:'aq'   },   {    name:'HTTP權威指南',    price:50,    en:'hq'   }  ] }, mutations:{  //同步  showMessage:function(state,data){   state.message = 'Store mutations changed this words。'+data;  }  addBook:function(state,data){   state.bookList.push(data)  } }, getters:{  filterPrice:function(state){   var narr = [];   for(var i = 0;i<state.bookList.length;i++){    state.bookList[i].price<85 ? narr.push(state.bookList[i]) : null;   }   return narr;  } }, actions:{  //異步操作  addBook:function(context){   setTimeout(function(){    context.commit('addBook',{name:'HTML5權威指南',price:75});   },2000);  } }, modules:{  a:storeA,b:storeB }});// vue 實例var vm = new Vue({　　el:'app',　　store:VuexStore,　　methods:{  showMessage:function(){　　　　　　this.$store.commit('showMessage','荷載數據')　　　　},  filterList:function(){   return this.store.getters.filterPrice();  },  addBooks:function(){　　　　　　this.$store.dispatch('addBook')　　　　},　　}});