vuex之modules 热加载（hot update）

store中有属性modules

modules内部可包含多个module，module拥有本身的 state、mutation、action、getter、甚至是嵌套子模块

store中配置modules以下：

export default () => {

    const store = new Vuex.Store({
        state: defaultState,
        mutations: defaultMutations,//同步操做
        getters: defaultGetters,
        actions: {//实现异步操做
            incrementAsync(context, n) {
                //setTimeout(context.commit('increment', n), 2000);
                setTimeout(() => {
                    context.commit('increment', { num1: n })//这里面num1必须在mutations中存在。
                }, 1000)
            }
        },
        modules: {
            a: defaultModuleA
        }
    })
    //hot update---------
    if (module.hot) {
        module.hot.accept([
            './state',
            './mutation',
            './getters',
            './modulea'
        ], () => {
            const newState = require('./state').default
            const newMutation = require('./mutation').default
            const newGetters = require('./getters').default
            const newModuleA = require('./modulea').default

            store.hotUpdate({
                state: newState,
                mutations: newMutation,
                getters: newGetters,
                modules: {
                    a: newModuleA
                },
            })
        })

    }
    return store
}

View Code

modulesa的代码以下：

export default {
    state: {
        aaa: 2222222
    },
    getters: {
        getaaa(state) {
            return state.aaa + "ddd";
        }
    }
}

View Code

这样就实现了store中modules中modulea的热加载，测试是否热加载成功，能够在组件中这样写：

<p>moduleA.state.aaa:{{$store.state.a.aaa}}</p>
<p>moduleA.state.getaaa:{{$store.getters.getaaa}}</p> <!-获取modulea中getters的方法，固然还有其它获取方法，看最后补充！！ ->

这里有一点须要注意的是：module中的state属性也是不能够热加载的。

 

补充：module中getters在组件中其它获取方式：

1、modulea中加入属性namespaced；

2、组件中引入

import { mapGetters} from "vuex";

 

//mapGetters有下面两种方式

...mapGetters(["getaaa"]), //当mdulea的namespaced=false

...mapGetters({

getaaa1: "a/getaaa" //当mdulea的namespaced=true

})

 

这样组件中就能够这样获取：

<p>{{getaaa}}</p>//当mdulea的namespaced=false

<p>{{getaaa1}}</p>//当mdulea的namespaced=true