Vue状态管理：vuex

因为vue是单向数据流，父子组件数据传递为单向流动（父->子），子组件向父组件传递需要用$emit方法，兄弟组件之间数据传递通过他们的父元素进行数据交换，如果是页面组件，则通过路由传参，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)
            }

Hui先生

Vue状态管理：vuex