Tips on Vuex 1.0

写了一个基于 Vue 1 和 iView 的前端项目，用 Vuex 做了状态管理，分享一下 Vuex 比较重要的知识点和踩到的坑。有一些个人见解在里边，不周之处希望大家批评指正。

Vuex 组成

Vuex in Vue.js

• 一个 Vuex 组件由三部分组成：
  • state: 状态信息（包括应用的属性、状态、数据等）
  • mutations: 对 state 的操作（添加、修改等）由 mutations 执行而不是直接以赋值的形式修改。
  • actions: 应用程序通过调用 actions 触发 mutations。（也可以直接dispatch一个 mutation ，但是不建议这样做。）

Vuex 原则

• 在程序初始化的时候尽可能声明全部的 state，并且赋一个初始值。
• action 不修改 state，而是 dispatch 一个 mutation，如果有额外参数，可以作为 payload 传递给 mutation 。
• state 是只读的，只有 mutation 可以修改 state，其余任何函数都无权修改，也不应该尝试修改 state 。直接对 state 进行的修改会影响 Vuex 对视图更新的判断。
• 其实不必把所有的状态信息全部放到 vuex 中，有一些组件局部的属性可以不放在 vuex 中，比如：
  • 控制组件视图中元素样式的变量（比如 SPA 中控制导航栏的 active 状态的变量）
  • 控制组件视图中弹窗提示是否显示的变量。
• 这些变量本身只与视图相关，且不受其他组件的影响，也不需要暴露接口以供修改，所以完全可以放在组件的 data 中，这样做也可以从一定程度上减少代码量。

Vuex 在项目中的目录结构与代码划分

Project Structure

• 全局共享的 state 和 mutation 建议放在 store 中，比如：登录状态，access-token 。
• 某些组件自身的 state 较多，或者 state 结构比较复杂，可以为其单独设置一个 module，降低全局 state 的结构复杂度。比如：用户注册组件。
• 显式的声明 mutation-type 和 actions 有助于代码的检查和维护，开发者可以通过 mutation-types 文件清晰地了解到该项目包含哪些状态（数据）更新操作。

• 一个运用了 Vuex 的单页应用：

  
  
  vuex in SPA

遇到的问题

1. 在 <template> 之外调用 vuex 相关资源:

   • actions: 引入 actions 和 store 后直接调用（组件内不用引用 store ）。（要传递 store 作为参数）
   • state: 组件外引入 store 后使用 store.state ，组件内使用 this.$store.state 。

2. Vuex 自动为在 <template> 之中被调用的 action 传递了 store 对象，在其之外调用 action 时，要将 store 显式的作为参数传入以供函数使用（解构）。

   // 在 util 等 Vue 组件外的工具类中
   actions.updateDirList(store, response.data);
   
   // 在 Vue 组件内
   actions.updateStatus(this.$store, status);
   

3. Vuex 更新表单

   • 使用 on-change 事件触发 actions 用于更新与表单项对应的 state。
   • 保存在组件本地的 data 中，提交时更改 state。
   • 切记不要直接更新 store.state ，会触发错误提示。

附：文档截图