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在组件中其它获取方式:

一、modulea中加入属性namespaced;

二、组件中引入

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
posted @ 2018-11-03 00:26  Phil李  阅读(2189)  评论(0编辑  收藏  举报