应用结构
实际上，vuex 在怎么组织你的代码结构上面没有任何限制，相反，它强制规定了一系列高级的原则：
1、应用级的状态集中放在 store 中。
2、改变状态的唯一方式是提交mutations，这是个同步的事务。
3、异步逻辑应该封装在action 中。
只要你遵循这些规则，怎么构建你的项目的结构就取决于你了。如果你的 store 文件非常大，仅仅拆分成 action、mutation 和 getter 多个文件即可。
对于稍微复杂点的应用，我们可能都需要用到模块。下面是一个简单的项目架构：
├── index.html
├── main.js
├── api
│ └── ... # 这里发起 api 请求
├── components
│ ├── app.vue
│ └── ...
└── store
├── index.js # 组合 modules 、export store
├── actions.js # 根 action
├── mutations.js # 根 mutations
└── modules
├── cart.js # cart 模块
└── products.js # products 模块
关于更多，查看 购物车实例。
modules
由于使用了单一状态树，应用的所有状态都包含在一个大对象内。但是，随着我们应用规模的不断增长，这个store变得非常臃肿。
为了解决这个问题，vuex 允许我们把 store 分 module（模块）。每一个模块包含各自的状态、mutation、action 和 getter，甚至是嵌套模块， 如下就是它的组织方式：
const modulea = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleb = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new vuex.store({
modules: {
a: modulea,
b: moduleb
}
})
store.state.a // -> modulea's state
store.state.b // -> moduleb's state
模块本地状态
模块的 mutations 和 getters方法第一个接收参数是模块的本地状态。
const modulea = {
state: { count: 0 },
mutations: {
increment: (state) {
// state 是模块本地的状态。
state.count++
}
},
getters: {
doublecount (state) {
return state.count * 2
}
}
}
相似地，在模块的 actions 中，context.state 暴露的是本地状态， context.rootstate暴露的才是根状态。
const modulea = {
// ...
actions: {
incrementifodd ({ state, commit }) {
if (state.count % 2 === 1) {
commit('increment')
}
}
}
}
在模块的 getters 内，根状态也会作为第三个参数暴露。
const modulea = {
// ...
getters: {
sumwithrootcount (state, getters, rootstate) {
return state.count + rootstate.count
}
}
}
命名空间
要注意，模块内的 actions、mutations 以及 getters 依然注册在全局命名空间内 —— 这就会让多个模块响应同一种 mutation/action 类型。你可以在模块的名称中加入前缀或者后缀来设定命名空间，从而避免命名冲突。如果你的 vuex 模块是一个可复用的，执行环境也未知的，那你就应该这么干了。距离，我们想要创建一个 todos 模块：
// types.js
// 定义 getter、 action 和 mutation 的常量名称
// 并且在模块名称上加上 `todos` 前缀
export const done_count = 'todos/done_count'
export const fetch_all = 'todos/fetch_all'
export const toggle_done = 'todos/toggle_done'
// modules/todos.js
import * as types from '../types'
// 用带前缀的名称来定义 getters, actions and mutations
const todosmodule = {
state: { todos: [] },
getters: {
[types.done_count] (state) {
// ...
}
},
actions: {
[types.fetch_all] (context, payload) {
// ...
}
},
mutations: {
[types.toggle_done] (state, payload) {
// ...
}
}
}
注册动态模块
你可以用 store.registermodule 方法在 store 创建之后注册一个模块：
store.registermodule('mymodule', {
// ...
})
模块的 store.state.mymodule 暴露为模块的状态。
其他的 vue 插件可以为应用的 store 附加一个模块，然后通过动态注册就可以使用 vuex 的状态管理功能了。例如，vuex-router-sync 库，通过在一个动态注册的模块中管理应用的路由状态，从而将 vue-router 和 vuex 集成。
你也能用 store.unregistermodule(modulename) 移除动态注册过的模块。但是你不能用这个方法移除静态的模块（也就是在 store 创建的时候声明的模块）。
plugins
vuex 的 store 接收 plugins 选项，这个选项暴露出每个 mutation 的钩子。一个 vuex 的插件就是一个简单的方法，接收 sotre 作为唯一参数：
const myplugin = store => {
// 当 store 在被初始化完成时被调用
store.subscribe((mutation, state) => {
// mutation 之后被调用
// mutation 的格式为 {type, payload}。
})
}
然后像这样使用：
const store = new vuex.store({
// ...
plugins: [myplugin]
})
在插件内提交 mutations
插件不能直接修改状态 - 这就像你的组件，它们只能被 mutations 来触发改变。
通过提交 mutations，插件可以用来同步数据源到 store。例如， 为了同步 websocket 数据源到 store (这只是为说明用法的例子，在实际中，createplugin 方法会附加更多的可选项，来完成复杂的任务)。
export default function createwebsocketplugin (socket) {
return store => {
socket.on('data', data => {
store.commit('receivedata', data)
})
store.subscribe(mutation => {
if (mutation.type === 'update_data') {
socket.emit('update', mutation.payload)
}
})
}
}
const plugin = createwebsocketplugin(socket)
const store = new vuex.store({
state,
mutations,
plugins: [plugin]
})
生成状态快照
有时候插件想获取状态 “快照” 和状态的改变前后的变化。为了实现这些功能，需要对状态对象进行深拷贝：
const mypluginwithsnapshot = store => {
let prevstate = _.clonedeep(store.state)
store.subscribe((mutation, state) => {
let nextstate = _.clonedeep(state)
// 对比 prevstate 和 nextstate...
// 保存状态，用于下一次 mutation
prevstate = nextstate
})
}
** 生成状态快照的插件只能在开发阶段使用，使用 webpack 或 browserify，让构建工具帮我们处理：
const store = new vuex.store({
// ...
plugins: process.env.node_env !== 'production'
? [mypluginwithsnapshot]
: []
})
插件默认会被起用。为了发布产品，你需要用 webpack 的 defineplugin 或者 browserify 的 envify 来转换 process.env.node_env !== 'production' 的值为 false。
内置 logger 插件
如果你正在使用 vue-devtools，你可能不需要。
vuex 带来一个日志插件用于一般的调试:
import createlogger from 'vuex/dist/logger'
const store = new vuex.store({
plugins: [createlogger()]
})
createlogger 方法有几个配置项：
const logger = createlogger({
collapsed: false, // 自动展开记录 mutation
transformer (state) {
// 在记录之前前进行转换
// 例如，只返回指定的子树
return state.subtree
},
mutationtransformer (mutation) {
// mutation 格式 { type, payload }
// 我们可以按照想要的方式进行格式化
return mutation.type
}
})
日志插件还可以直接通过 <script> 标签, 然后它会提供全局方法 createvuexlogger 。
要注意，logger 插件会生成状态快照，所以仅在开发环境使用。
严格模式
要启用严格模式，只需在创建 vuex store 的时候简单地传入 strict: true。
const store = new vuex.store({
// ...
strict: true
})
在严格模式下，只要 vuex 状态在 mutation 方法外被修改就会抛出错误。这确保了所有状态修改都会明确的被调试工具跟踪。
开发阶段 vs. 发布阶段
不要在发布阶段开启严格模式！ 严格模式会对状态树进行深度监测来检测不合适的修改 —— 确保在发布阶段关闭它避免性能损耗。
跟处理插件的情况类似，我们可以让构建工具来处理：
const store = new vuex.store({
// ...
strict: process.env.node_env !== 'production'
})