Vuex

1. Vuex 是什么

官方介绍：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

简单来说,对 vue 应用中多个组件的共享状态进行集中式的管理(读/写)。

2. Vuex 的安装

1. Vue.use(Vuex) → 混入一个 beforeCreate 生命周期钩子，目的是用来 Vue 实例挂载 $store 属性，用以引用全局 store
2. new Vuex.Store(options) 生成 Store 实例：
   • 初始化一堆属性和方法
   • 执行 installModule 初始化 module
   • 执行 resetStoreVM 创建一个 Vue 实例，并用 state 作为 data 选项，getter 作为 computed 选项。

3. Vuex 对 module 的处理

1. 唯一标识：每一个 module 拥有自己的一个 path 数组，这个数组记录了module 在 store 里的嵌套关系
2. 注册一个命名空间为 namespace 的 module A 的 state、getter、mutation、action：
   • state：通过根 state 的 A 属性去引用 → 对根 state 进行深度观测时，即可对全部 module 的 state 进行观测
   • getter：以 [namespace + 方法名] 注册到 store._wrappedGetters 里
   • mutation：以 [namespace + 方法名] 注册到 store._mutations 里
   • action：以 [namespace + 方法名] 注册到 store._actions 里
3. 调用时：
   • state：可以通过 根 state 去访问。另外，module 的 state 也会传入对应 module 的 getter、mutation、action 作为参数
   • getter：store.getter[ namespace + 方法名]
   • mutation：store.commit( namespace + 方法名 )
   • action：store.dispatch( namespace + 方法名 )

其实，不管是开发者是在局部模块还是在全局上调用 commit、dispatch，从源码层次看都是在全局调用 commit、dispatch，只不过是借助了一个命名空间来模拟了父子模块之间的独立。对应的，所有的 mutation 和 action 也是注册在全局上的。

4. Vuex state、getter 的响应式原理

本质上，是 new 一个全新的 Vue 实例，并将 state 和 getter 作为 data 和 computed 选项去进行处理，实现了 state 和 computed 的响应式。进而实现 “state 改变 → 视图重新渲染” 这种模式。

5. Vuex 的单向数据流

Vuex 内部是维护了一个单向数据流：action → mutation → state → 视图改变。

state 的改变只能通过 commit 一个 mutation 来触发。而如果是异步操作修改 state，将异步操作封装成一个 action 然后去 dispatch 触发，而 action 是不能直接改变 state，它必须 commit 一个 mutation 去改变 state。

为什么要这样做呢？我们要知道 state 维护的是全局的一个状态，它修改影响到的可能是多个组件的视图渲染，如果组件可以随意地直接改变 state，那么会 state 的改变很难追踪，导致 state 的维护困难。

所以我们需要用一个单向数据流去维护 state 的修改，能够让 state 的修改变得可预测。

Vuex 源码分析之常见问题总结

原文：https://www.cnblogs.com/wsg1111/p/14402738.html