Vue狀態管理：vuex

 做用

由於vue是單向數據流，父子組件數據傳遞爲單向流動（父->子） ，子組件向父組件傳遞須要用$emit方法，兄弟組件之間數據傳遞經過他們的父元素進行數據交換，若是是頁面組件，則經過路由傳參，vuex解決的就是全部組件之間的數據交換，事實動態更新。

 爲何不用全局變量而要用vuex

由於全局變量只有引用類型（對象、數組）才能夠實現實時更新 ，普通類型數據沒法實時更新

 頁面刷新後store中的數據就恢復初始化了怎麼辦

如刷新頁面還要保留的數據就放在瀏覽器緩存中 

 如何使用vuex

// store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const  portalMod={
    //狀態數據源，相似於data對象
    state:{
        pageNum: 2,
        myNum:2,
    },
    //狀態數據操做方法，相似於methods
    mutations:{
        incrementPage (state,n) {
            state.pageNum+=n
        },

        incrementmyNum(state,n){
            state.myNum+=n
        }
    },
    //狀態計算屬性，相似於computed，只支持同步
    getters:{
        compPagenum:function (state,getters) {
            return state.pageNum+getters.compmyNum;
        },
        compmyNum:function (state) {
            return state.myNum+'的getter'
        }
    },
    /和getters相似，不過支持異步
    actions:{
        incrementAsync (context,n) {
            setTimeout(() => {
                context.commit('incrementPage',n)
            }, 1000)
        }
    }

}




// 下面這個至關關鍵了，全部模塊，註冊才能使用
export default new Vuex.Store({
    modules:{   //模塊化，便於管理狀態屬性
        portalMod:portalMod,
    }
})

 

import { mapState } from 'vuex'


computed: mapState({    //經過計算屬性獲取狀態屬性
            pageNum: state=> state.portalMod.pageNum,
            comp_pageNum:function () {
                return this.$store.getters.compPagenum
            }
        }),



 add:function () { //經過commit動態修改狀態屬性，數據實時聯動
                this.$store.commit('incrementmyNum',9)
            }