我已经设置了我的 vuex 模块的热重载和动态加载。
store.js 文件- 热更新部分
if (module.hot) {
// accept actions and mutations as hot modulesLoader
module.hot.accept([
'./store/modules/index.js',
'./store/helpers/global-actions',
'./store/helpers/global-mutations',
...modulePaths,
// './store/helpers/global-actions',
], () => {
let newModules = require('./store/modules').modules
store.hotUpdate({
actions: require('./store/helpers/global-actions'),
mutations: require('./store/helpers/global-mutations'),
modules: newModules,
})
})
}
模块/index.js 文件
const requireModule = require.context('.', true, /index.js$/)
const modules = {}
const modulePaths = []
requireModule.keys().forEach(fileName => {
if (fileName === './index.js') {
modulePaths.push(fileName.replace('./', './store/modules/'))
return
} else {
let moduleName = fileName.match(/(?<=\/)\w*(?=\/)/g)[0]
modulePaths.push(fileName.replace('./', './store/modules/'))
modules[moduleName] =
{
namespaced: false,
...requireModule(fileName),
}
}
})
export {modulePaths, modules}
基本上,这段代码所做的是动态加载带有 index.js 文件的文件夹作为模块(其中模块名称是文件夹名称)。
如果我更新模块操作、getter 或突变,一切都会按预期工作,当任一模块更新时,我确实会添加新操作到存储以及突变。
我唯一无法开始工作的是在更新时更改模块状态。因此,如果我更改模块状态,它不会得到反映。这是正常行为吗?还是我做错了什么?