Vuex访问子目录中的模块

Question

我有以下目录结构：

• 商店
  • 模块
    • file1.js
    • 文件2.js
    • 文件3.js
    • 另一个文件夹
      • 文件x1.js

我的问题是，如何访问anotherFolder/filex1.js的状态我可以设置值，但无法获取。

this.$store.dispatch('anotherFolder/filex1/myAction', {}) //work
let val = this.$store.state.anotherFolder.filex1.myValue //not work

我导入的模块如下。

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)
const modulesFiles = require.context('./modules', true, /.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
const moduleName = modulePath.replace(/^./(.*).w+$/, '$1')
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {})
const store = new Vuex.Store({
modules,
getters
})
export default store

我的文件x1.js

export default {
namespaced: true,
state: {
myValue: {}
},
actions: {
myAction({ commit }, reg) {
commit('MY_ACTION', reg)
}
},
mutations: {
MY_ACTION(state, reg) {
state.myValue = reg
}
}
}

我想把商店的文件组织在子目录中，这样我就不会把所有的东西都放在模块文件夹中。谢谢

Answer 1

您可以在组件中使用vuex提供的绑定助手来访问嵌套模块中的状态：

computed: {
...mapState({
a: state => state.some.nested.module.a,
b: state => state.some.nested.module.b
})

}

请参阅：https://vuex.vuejs.org/guide/modules.html#namespacing