Vuex 状态机

Question

1. Vuex 有哪些重要概念

• state ： 存储数据状态 ；可以通过 this.$store.state 访问；对应 vue 里的 data；存放数据的方式是响应式的，vue 组件可以从 store 中读取数据，如果数据变化，组件也会发生相应的更新。mapstate 可以在页面里简化调用
• Getter ： 就相当于 store 的计算属性 ，他的返回值会根据他的依赖被缓存起来，且只有当它的依赖发生改变的时候才会被重新计算。这里我们可以通过定义 vuex 的 Getter 来获取，Getters 可以 用于监听、state 中的值的变化，返回计算后的结果 ，
• muation ： 更改 vuex 的 store 的唯一方法就是提交 mutation
• action ： 包含任意异步操作，通过提交 mutation 间接改变状态 。调用 mutation 最大的好处是可以异步，分发请求
• module ： 将 store 分割成模块 ，每个模块都具备上边四种方法，甚至子模块
• 当组件进行数据修改时，调用 dispatch 来触发 action 里边的方法；
• 每个 action 里边都有一个 commit 方法，可以通过 commit 来修改 mutations 里边的方法进行数据修改
• mutation 中都会有一个 state 参数，这样可以通过 mutation 修改了 state 数据
• 数据修改完毕之后，页面发生改变

2. Vuex 的底层原理

基本的 Vue 状态自管理应用包含以下几个部分：

• state，驱动应用的数据源；
• view，以声明方式将 state 映射到视图；
• actions，响应在 view 上的用户输入导致的状态变化。

实现原理：vuex 是利用 vue 的 mixin 混入机制，在 beforeCreate 钩子前混入 vuexInit 方法， vuexInit 方法实现了 store 注入 vue 组件实例 ， 并注册了 vuex store 的引用属性$store 。store 注入过程如下图所示：

3. 为什么用 vuex

1. 当 组件多层嵌套 的时候， 父子组件传递数据很麻烦 。
2. 增加代码的可读性和可维护性
3. 数据是响应式的，减少数据的派发操作 ；

4. Vuex 如何区分 state 是外部直接修改，还是通过 mutation 方法修改的？

Vuex 中修改 state 的唯一渠道就是执行 commit('xx', payload) 方法，其 底层通过执行 this._withCommit(fn) 设置_committing 标志变量为 true，然后才能修改 state，修改完毕还需要还原_committing 变量。 外部修改虽然能够直接修改 state，但是并没有修改_committing 标志位，所以只要 watch 一下 state，state change 时判断是否_committing 值为 true，即可判断修改的合法性 。

5. vue 中 ajax 请求代码应该写在组件的 methods 中还是 vuex 的 action 中

如果请求来的数据不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入 vuex 的 state 里。