Vuex 访问子目录中的模块
Vuex access modules in subdirectories
我的目录结构如下:
- 商店
- 模块
- file1.js
- file2.js
- file3.js
- 另一个文件夹
- filex1.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+$/, '')
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {})
const store = new Vuex.Store({
modules,
getters
})
export default store
我的filex1.js
export default {
namespaced: true,
state: {
myValue: {}
},
actions: {
myAction({ commit }, reg) {
commit('MY_ACTION', reg)
}
},
mutations: {
MY_ACTION(state, reg) {
state.myValue = reg
}
}
}
我想在子目录中组织商店的文件,这样模块文件夹中就没有所有内容了。
谢谢!
您可以在组件中使用 vuex 提供的绑定助手来访问嵌套模块中的状态:
computed: {
...mapState({
a: state => state.some.nested.module.a,
b: state => state.some.nested.module.b
})
}
我的目录结构如下:
- 商店
- 模块
- file1.js
- file2.js
- file3.js
- 另一个文件夹
- filex1.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+$/, '')
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {})
const store = new Vuex.Store({
modules,
getters
})
export default store
我的filex1.js
export default {
namespaced: true,
state: {
myValue: {}
},
actions: {
myAction({ commit }, reg) {
commit('MY_ACTION', reg)
}
},
mutations: {
MY_ACTION(state, reg) {
state.myValue = reg
}
}
}
我想在子目录中组织商店的文件,这样模块文件夹中就没有所有内容了。 谢谢!
您可以在组件中使用 vuex 提供的绑定助手来访问嵌套模块中的状态:
computed: {
...mapState({
a: state => state.some.nested.module.a,
b: state => state.some.nested.module.b
})
}