如何实现vuex的模块化?
时间: 2023-07-07 11:31:06 浏览: 113
要实现Vuex的模块化,你需要在store目录下创建一个或多个模块文件,每个文件对应一个模块。每个模块都应该有自己的state、mutations、actions和getters。
例如,你可以在store目录下创建一个名为`moduleA.js`的文件,它的内容如下:
```javascript
const state = {
count: 0
}
const mutations = {
increment (state) {
state.count++
}
}
const actions = {
asyncIncrement ({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
}
const getters = {
doubleCount (state) {
return state.count * 2
}
}
export default {
state,
mutations,
actions,
getters
}
```
然后在你的`store.js`文件中引入这个模块:
```javascript
import Vue from 'vue'
import Vuex from 'vuex'
import moduleA from './modules/moduleA'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
a: moduleA
}
})
```
现在你就可以在组件中通过`this.$store.state.a.count`来访问模块的状态,通过`this.$store.commit('a/increment')`来提交模块的mutation,通过`this.$store.dispatch('a/asyncIncrement')`来分发模块的action,通过`this.$store.getters['a/doubleCount']`来获取模块的getter。
阅读全文