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