vuex 概览

vuex概览

1.state 状态，这里就是你存数据的地方。
2.getter计算属性，这里存放基于state衍生的其它属性，当state更新时会更新getter：

    getters:{
        len: (state, getters, rootState, rootGetters) {
        // 提供的参数便于访问 state 和 getter
            return state.arr.length
        }
    }

3.vuex提供mapState、mapGetters、mapActions、mapMutations四个辅助函数，将对应的对象映射到局部属性中：

import { mapState } from 'vuex'
// 以下代码是命名空间的辅助函数，在模块嵌套中可以很方便的使用
// import { createNamespecadHelpers } from 'vuex'
// const { mapState } = createNamespecadHelpers('a/b/c')
const o = {
    computed: {
    ...mapState(['a', 'b'])
    }
}

4.mutation定义怎么去触发数据的更新，类似于绑定自定义事件，且一定是同步的：

mutations:{
 mutationName (state, obj) { // 第二个参数是非必传
     state.count++
 }
}

5.commit来触发mutation：

store.commit('mutationName',obj) // 第二个参数是可选参数，支持任何类型，会传递到mutation

6.action定义提交怎么commit–>mutation，支持异步，定义形式同mutation类似，例如：

actions:{
    test (context) {
    // context.state 内部状态，相对于Module
    // context.rootState 根节点状态
        context.commit('mutationName')
    }
}

7.dispatch来触发action，触发形式同commit一样，但dispatch可能返回一个promise
8.组合action:

// 假设 getData 和 getOther 返回的是Promise
actions:{
    async actionA ({commit}) {
        commit('gotData', await getData())
    }
    async actionB ({dispatch,commit}) {
        await dispatch('actionA')
        commit('gotOther', await getOther())
    }
}

9.Modules，vuex允许定义多个Module，每个Module有各自的state、getter、mutation、action和Module.

const store = new Vuex.Store({
    modules:{
        a: ModuleA,
        b: ModuleB
    }
})
store.state.a // 访问 ModuleA 的状态

10、namespaced命名空间，boolean值，默认false。启用后，在模块内省略命名空间前缀；若访问全局命名空间，getter会在第三和第四个参数传入 rootState 和 rootGetter，action 可在context的属性中访问。
11.registerModule 和 unregisterModule可以动态创建和卸载动态模块，但是静态模块不能卸载，registerModule 还可以将模块的状态存档（preserveState）。
12.防止模块多实例之间的污染，跟vue组件内的data用同样的方法解决。

// vuex实例
new Vuex.Store({
    state () {
        a1: 0
    },
    getters: {
        b: state => state.a1
    },
    mutations:{
        add (state, num) {state.a1 += num}
    },
    actions:{
        actionA: (c) {
            c.commit('add', 10)
        }
    }
})

(https://vuex.vuejs.org “vuex官方文档”)