3

我已经设置了我的 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 或突变,一切都会按预期工作,当任一模块更新时,我确实会添加新操作到存储以及突变。

我唯一无法开始工作的是在更新时更改模块状态。因此,如果我更改模块状态,它不会得到反映。这是正常行为吗?还是我做错了什么?

4

0 回答 0