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

 1 // 例項化vuex狀態庫
 2 var vuexStore = new Vuex.Store({
 3     state:{
 4         message:'Hello World',
 5         bookList:[
 6             {
 7                 name:'javascript權威指南',
 8                 price:100,
 9                 en:'jq'
10             },
11             {
12                 name:'angularjs權威指南',
13                 price:80,
14                 en:'aq'
15             },
16             {
17                 name:'HTTP權威指南',
18                 price:50,
19                 en:'hq'
20             }
21         ]
22     },
23     mutations:{
24         //同步
25         showMessage:function(state,data){
26             state.message = 'Store mutations changed this words。'+data;
27         }
28         addBook:function(state,data){
29             state.bookList.push(data)
30         }
31     },
32     getters:{
33         filterPrice:function(state){
34             var narr = [];
35             for(var i = 0;i<state.bookList.length;i++){
36                 state.bookList[i].price<85 ? narr.push(state.bookList[i]) : null;
37             }
38             return narr;
39         }
40     },
41     actions:{
42         //非同步操作
43         addBook:function(context){
44             setTimeout(function(){
45                 context.commit('addBook',{name:'HTML5權威指南',price:75});
46             },2000);
47         }
48     },
49     modules:{
50         a:storeA,b:storeB
51     }
52 });
53 
54 // vue 例項
55 var vm = new Vue({
56 　　el:'app',
57 　　store:VuexStore,
58 　　methods:{
59         showMessage:function(){
60 　　　　　　this.$store.commit('showMessage','荷載資料')
61 　　　　},
62         filterList:function(){
63             return this.store.getters.filterPrice();
64         },
65         addBooks:function(){
66 　　　　　　this.$store.dispatch('addBook')
67 　　　　},
68 　　}
69 });

【state】vuex核心概念有五個，試想當我們把所有的狀態從各個元件抽出來，放入了state中：message和bookList；

【mutations】某個時候，某個元件中，我們需要把state中的message改變資料，我們要通過呼叫commit方法提交到mutations對應的事件：commit('showMessage'),這樣就會呼叫mutations裡showMessage方法；呼叫方法是如上面程式碼中57行的方式；

【getters】某個時間，某個元件我們需要獲得bookList中價格小於85的所有資料，vuex中允許我們通過getters來獲取：使用方法如上程式碼中60行

【actions】這個是mutations的強化部分，只是這個裡面的函式可以非同步操作，比如網路請求等等；這裡面的方法如果要更改狀態，最好要通過commit()函式提交到mutations裡去處理。官方是這麼說的。在例項裡呼叫一般是通過dispatch('funName')來呼叫的；例如例項中：66行程式碼

【關於moduls】modules其實就是多個狀態管理庫，放在一個物件裡，比如我們有2個狀態庫：storeA，storeB。我們在modules裡就和上面程式碼中50行的寫法是一樣的。

 在取值的時候就直接在例項裡呼叫：this.$store.state.a即可返回storeA這個store裡的狀態。

這裡有一個點要注意一下：所有子模組裡的getters物件裡的方法會被合併到$store裡，如果不同子模組裡有重名的方法，那麼會報錯；

但是所有子模組裡actions和mutations中的方法不會被合併，重名也不會報錯。但是當你dispatch或者commit一個同名的事件的時候，會依次執行每一個子模組中的事件。

所以在不同子模組的actions和mutations中不要寫重複的函式名稱；

使用Vuex

下面我們來講一下怎麼引入一個Vuex協助我們管理狀態：

首先當然要引入Vuex.js；

然後,我們新建一個vuex例項

1 var store = new VuexStore({
2    state:{
3     } ,
4     mountations:{
5     },        
6 })

建立好store後我們需要把這個store注入到vue的例項和元件中，

1 var vm = new Vue({
2    el:'#app',
3    store:store  
4 })

然後我們就能像上面介紹的方法使用了。

搜尋

複製