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

 

// 實例化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')
　　　　},
　　}
});

 

 

【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實例

 

var store = new VuexStore({
   state:{
    } ,
    mountations:{
    },        
})

 

創建好store后我們需要把這個store注入到vue的實例和組件中，

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

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

 

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

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

 

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

歡迎大家批評指正。