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
}
modulesa的代码如下:
export default {
state: {
aaa: 2222222
},
getters: {
getaaa(state) {
return state.aaa + "ddd";
}
}
}
这样就实现了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