项目使用 vuex 做数据共享和管理。忙于业务开发时，只关注如何使用，却没想过为何使用。
现在有时间做总结了，在此记录一下。
总结共分三篇：基础篇和原理篇、实践篇、思考篇。建议先浏览一下思考篇的几个问题，再回看基础篇。
本文关注问题速览：
-
项目如何使用 vuex
- 拆分 store 时，我在想什么
- require.context 维护 module
- 结合 devtool 追踪 state
项目如何使用 vuex
本文介绍三点：
- 拆分 store 时，我在想什么
- require.context 维护 module
- 结合 devtool 追踪 state 变化
拆分 store 时，我在想什么？
随着项目添加的模块增多，需要借助 store 共享的数据越来越多，单个 store 文件逐渐臃肿难维护。module 拆分工作迟早要做了。
笔者并没有立即开始敲代码，而是先分析了下当前需要维护的 module ，考虑了以下几点：
- 解耦 - 依赖 store 的功能模块有哪些？能直接放到组件内部维护的有哪些?
- 重组 - 剩下需要拆分的 module 之间，是否有关联(比如 actionA 内部调用 actionB, actionC 调用成功后执行 actionD)，这些关联关系是否应该放到一个module下维护？
经历了上述的分析和实际拆分工作后，发现还是存在过于臃肿的 module。
这时候考虑再细化拆分，一个 module.js 文件拆成四个文件 state.js, getters.js, mutations.js, action.js。
如何将上述四份文件整合到 module 中变成要解决的问题。项目中使用了require.context。
store 目录层级举例：
使用 require.context ，自动维护 module
require.context 是 Webpack 封装函数，用于创建自己的 context。
代码用这个方法获取 module 文件夹下的各级文件，并维护到全局modules中。 （代码还需要优化，只着急实现了功能。）
import _ from 'lodash'
const files = require.context('.', true, /.js$/)
const modules = {}
files.keys().forEach(key => {
if (key === './index.js') return
const path = key.replace(/(./|.js)/g, '')
const [namespace, imported, modulesNamespace, modulesImported] = path.split('/')
if (imported !== 'modules') {
if (!modules[namespace]) {
modules[namespace] = {
namespaced: true
}
}
modules[namespace][imported] = files(key).default
} else {
modulesImported
? _.set(
modules,
`${namespace}.${imported}.${modulesNamespace}.${modulesImported}`,
files(key).default
)
: _.set(modules, `${namespace}.${imported}.${modulesNamespace}`, files(key).default)
}
})
export default modules
结合 devtool 追踪 state 变化
参考 文档
devtools - vuex 常用功能介绍：
1 - 回到指定 store 快照
2 - 回退指定 store 快照
3 | 8 - 合并指定 | 所有 mutation
4 | 5 - 导入 | 导出 store
6 - 是否继续记录 mutations
7 - 清空 store， state 初始化。近似刷新页面的效果。
