vue組件化開發-vuex狀態管理庫

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 })

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

 

最後多說一嘴，官方建議的目錄結構是吧mutations，actions，getters等一系列，都分開放在不一樣的目錄，便於多人開發與維護。

vue到此已經研究了不少。行百里者半九十，還須要深刻研究。我的對vue2.0的總結demo已上傳至gitHub。地址：https://github.com/HUA1/vue2-summary.git

 

本文到此結束，所涉及的vue版本是2.0.x;vuex版本是：2.2.1。

歡迎你們批評指正。