- 1. Vuex 需要遵守的规则
- 2. Vuex 目录结构示例【官方】
- 3. 调整 Vuex 目录结构
- 4. 按照功能模块组织目录结构
1. Vuex 需要遵守的规则
Vuex 并不限制你的代码结构,但是,它规定了一些需要遵守的规则
1. 应用层级的状态应该集中到单个 store 对象中。也就是一个应用最好只使用一个 store 对象
2. 提交 mutation 是更改状态的唯一方法,并且这个过程是同步的
3. 异步逻辑都应该封装到 action 里面
只要遵守以上规则,如何组织代码随你便。store 文件太大时,只需将 action、mutation 和 getter 分割到单独的文件
2. Vuex 目录结构示例【官方】
Vuex 官方目录结构示例 : https://v3.vuex.vuejs.org/zh/guide/structure.html
对于大型应用,官方希望把 Vuex 相关代码分割到模块中。下面是项目结构示例 :
store
├── index.js # 组装模块并导出 store
├── getters.js # 根级别的 getter
├── actions.js # 根级别的 action
├── mutations.js # 根级别的 mutation
└── modules
├── user.js # 用户模块
└── shop.js # 商城模块
store/index.js 文件内容
import Vue from 'vue'
import Vuex from 'vuex'
// 导入抽离的 getters、mutations、actions
import getters from './getters'
import actions from './actions'
import mutations from './mutations'
// 导入抽离的 modules
import user from './modules/user'
import shop from './modules/shop'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {},
getters,
mutations,
actions,
modules: { user, shop }
})
export default store
store/getters.js、store/actions.js、store/mutations.js 文件内容
抽离出的 getters、mutations、actions 文件,直接默认导出一个对象即可,以 mutations 为例 :
export default {
incNum (state, value) {
state.num += value
}
}
store/modules/user.js、store/modules/shop.js 文件内容
export default {
state: {},
getters: {},
mutations: {},
actions: {}
}
3. 调整 Vuex 目录结构
可以在上面的目录结构中进行调整:
1. 将 state 也抽离出去
2. 使用 require.context 遍历模块目录
import Vue from 'vue'
import Vuex from 'vuex'
// 将 state 也抽离出去
import state from './state'
import getters from './getters'
import actions from './actions'
import mutations from './mutations'
// 使用 require.context 遍历模块目录
const files = require.context("./modules", false, /\.js$/);
const modules = files.keys().reduce((modules, item) => {
let key = /^\.\/(.+)\.js$/.exec(item)[1]
modules[key] = files(item).default
return modules
}, {})
Vue.use(Vuex)
const store = new Vuex.Store({
state,
getters,
mutations,
actions,
modules
})
export default store
4. 按照功能模块组织目录结构
这是当前我所在公司使用的一种 Vuex 目录结构组织方式
store
├── index.js # 组装模块并导出 store
└── modules
├── user.js # 用户功能模块
└── shop.js # 商城功能模块
store/modules/user.js
export const state = {}
export const getters = {}
export const mutations = {}
export const actions = {}
store/index.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
// 组装模块
let modules = {
state: {},
getters: {},
mutations: {},
actions: {}
}
const files = require.context("./modules", false, /\.js$/);
files.keys().forEach(key => {
Object.assign(modules.state, files(key)["state"]);
Object.assign(modules.getters, files(key)["getters"]);
Object.assign(modules.mutations, files(key)["mutations"]);
Object.assign(modules.actions, files(key)["actions"]);
});
const store = new Vuex.Store(modules);
export default store;