关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
应用结构实际上，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 moduleB = {
state: { ... },actions: { ... } } const store = new Vuex.Store({ store.state.a // -> moduleA's state 模块本地状态 模块的 mutations 和 getters方法第一个接收参数是模块的本地状态。 相似地，在模块的 actions 中，context.state 暴露的是本地状态， context.rootState暴露的才是根状态。 在模块的 getters 内，根状态也会作为第三个参数暴露。 命名空间 要注意，模块内的 actions、mutations 以及 getters 依然注册在全局命名空间内 —— 这就会让多个模块响应同一种 mutation/action 类型。你可以在模块的名称中加入前缀或者后缀来设定命名空间，从而避免命名冲突。如果你的 Vuex 模块是一个可复用的，执行环境也未知的，那你就应该这么干了。距离，我们想要创建一个 todos 模块： <div class="jb51code"> // 定义 getter、 action 和 mutation 的常量名称 // 用带前缀的名称来定义 getters,actions and mutations 注册动态模块 你可以用 store.registerModule 方法在 store 创建之后注册一个模块： 模块的
其他的 Vue 插件可以为应用的 store 附加一个模块，然后通过动态注册就可以使用 Vuex 的状态管理功能了。例如，vuex-router-sync 库，通过在一个动态注册的模块中管理应用的路由状态，从而将 vue-router 和 vuex 集成。 你也能用
Vuex 的 store 接收 plugins 选项，这个选项暴露出每个 mutation 的钩子。一个 Vuex 的插件就是一个简单的方法，接收 sotre 作为唯一参数： 然后像这样使用： 在插件内提交 Mutations 插件不能直接修改状态 - 这就像你的组件，它们只能被 mutations 来触发改变。 通过提交 mutations，插件可以用来同步数据源到 store。例如， 为了同步 websocket 数据源到 store (这只是为说明用法的例子，在实际中，createPlugin 方法会附加更多的可选项，来完成复杂的任务)。 生成状态快照 有时候插件想获取状态 “快照” 和状态的改变前后的变化。为了实现这些功能，需要对状态对象进行深拷贝： // 对比 prevState 和 nextState... // 保存状态，用于下一次 mutation ** 生成状态快照的插件只能在开发阶段使用，使用 Webpack 或 Browserify，让构建工具帮我们处理： 插件默认会被起用。为了发布产品，你需要用 Webpack 的 DefinePlugin 或者 Browserify 的 envify 来转换 process.env.NODE_ENV !== 'production' 的值为 false。 内置 Logger 插件 Vuex 带来一个日志插件用于一般的调试: const store = new Vuex.Store({
plugins: [createLogger()] }) createLogger 方法有几个配置项： 日志插件还可以直接通过 相关内容
|