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