写了一个基于 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
遇到的问题
-
在
<template>之外调用 vuex 相关资源:- actions: 引入
actions和store后直接调用（组件内不用引用store）。（要传递 store 作为参数） - state: 组件外引入
store后使用store.state，组件内使用this.$store.state。
- actions: 引入
-
Vuex 自动为在
<template>之中被调用的 action 传递了 store 对象，在其之外调用 action 时，要将 store 显式的作为参数传入以供函数使用（解构）。// 在 util 等 Vue 组件外的工具类中 actions.updateDirList(store, response.data); // 在 Vue 组件内 actions.updateStatus(this.$store, status); -
Vuex 更新表单
- 使用
on-change事件触发actions用于更新与表单项对应的state。 - 保存在组件本地的
data中，提交时更改state。 -
切记不要直接更新
store.state，会触发错误提示。
- 使用
附：文档截图
