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