Vuex 原理解析
核心思想：store，基于 Vue 响应式的全局对象。
- Vuex 的状态储存是响应式的，当 Vue 组件从 store 中去读状态时，若 store 中状态发生变化，那么相应的组件也会得到更新。
- 你不能直接改变 store 的值，改变 store 中的状态的唯一途径就是显式的提交，这样可以方便我们跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好的了解我们的应用。
特点
- 集中式储存管理应用的所有组件的状态。
- 并与相应的规则保证状态以一种可预测的方式改变。 状态管理
- state：驱动应用的数据源
- view：将 state 映射到视图当中
- actions：响应在 view 上的状态变化。
Vuex 核心思想
store：一个包含大部分状态的容器，他和全局变量的区别有两点不同：
- Vuex 状态时响应式的，数据会驱动视图发生变化。
- 你不能直接改变 store，改变的途径只能使用 commit 一个 mutation，因为这样可以方便跟踪每一个状态的变化。
通过定义和状态隔离的概念并强制遵守一定的规则，会使得代码易于维护。
Vuex 初始化
安装
- 实现一个 install，接受一个 vue 实例
- 使用 mixin 在 beforeCreat 中执行 vuexInit 方法
- 把 options.store 保存在所有组件的 this.$store 当中。
Store 实例化
在 import Vuex 后，会实例化其中的 Store 对象，返回 store 实例并传入 new Vue 的 options，也就是 options.store。
初始化 store._vm 将 getters 和 state 联系起来，利用了 Vue 中的 computed
通过 key 访问，store。getters 的某个值时，其实就是访问了 store._vm[key]，也就是 computed[key]。
初始化模块
Vuex 允许我们将 store 分割成多个模块（module）,每个模块都有自己的 store mutation action getter。
可以将 store 理解一个 root module，下面的 modules 就是子模块。（树形结构）
模块管理：注册=》构建=》加载模块=》建立关系
安装模块
初始化之后，对模块中的 state、getters、mutation、actions 做初始化工作。
执行 installModule
- registerMustion
- registerAction
- registerGetter
初始化 store._vm
resetStoreVm
- forEach 所有的值
- 将所有的值变成响应式的
- getters 是借助 computed 实现的
总结
安装，mixin 在 beforeCreate 中进行 this.$store 的实例化 把 store 想象成一个数据仓库，为了方便管理，将 store 拆分成了一些 modules，每个 moduels 又分别定义了 state,getter,mutations,actions，通过递归+遍历的方式完成了初始化。 为了更好的封装性和复用性，还定义了 namespace 的概念。 最后定义了一个内部的 Vue 实例，用来建立 state 和 getters 的联系，并且可以在严格模式下检测 state 的变化是不是来自外部的，确保求变的 state 的唯一途径就是显式的提交 mutation。
API
store 的 API 分析
数据获取
store.state.a.b.xx在 installModule 实现的
数据存储
修改通过 mutation 去修改，通过 commit 方法去提交一个 mutation。 mutation 必须是一个同步函数，用与同步修改 action 类似于 mutation，并且可以包含异步操作。 通过 dispatch 方法提交一个 action。
语法糖
mapState
mapGetters
mapMutations
mapActions
动态更新模块
通过 store 上提供的一个 registerModule 方法，支持传入一个路径进行动态模块定义。 相应的也提供动态卸载模块的方法，unregisterModule 方法，也是接受接受一个路径。
总结
Vuex 提供 API 包括数据的存取、语法糖、模块的动态更新等，值得学习。
最佳实践
Vuex 存储的数据是在内存中的，所以页面一刷新数据就消失了。解决方法就是利用浏览器的本地缓存和 Vuex 中做一个中间代理。缓存做为代理方，存储数据，Vuex 作为获取方，从本地缓存中拿去数据。
缓存方式的选择
- cookie：跟随域名的 cookie，5k,会带在 http 请求上
- sessionStorage：会话储存 5M，页面关闭数据清除
- localStorage：永久储存 5M，不清楚一直存在
他们的优劣和使用场景不同，localStorage 适合储存不变的数据，比如网站的 logo。sessionStorage 适合存储一些临时的数据，比如个人信息、token。而 cookie 储存较小，而且会带在着 http 请求上，不易过大，但是兼容性较好，比如在微信网页内，只能使用 cookie 进行储存。
优秀的第三方库
可以借助第三方库来更方便的操作本地缓存。