Vuex 教程之理论知识介绍

1. Vuex 是什么？

专为 Vue.js 应用程序开发的状态管理模式

2. Vuex 为什么出现？

为了更好的解决 vue 数据传输，比如当多个视图依赖同一个状态或者来自不同视图的行为需要变更同一状态。

3. 用法详解

3.1 思想

所有的状态变更都是由于数据变化引起的

3.2 安装

npm install vuex --save

3.3 store

一个容器，放着所有公共的 state ；Vue 组件从 store 中读取状态，相应组件也跟着动态变化；改变 store 的唯一方法是 commit mutation，这样可以明确的追踪到状态的变化

3.4 state

单一状态树，读取方法：计算属性中直接返回；
mapState（辅助函数）生成计算属性，避免应该一个组件获取多个状态的时候，每个状态都声明为计算属性造成冗余

3.5 Getter

sotre 的计算属性；
当某个属性被多个组件频繁调用的时候，可以用 getter 抽取出来，其它组件直接调用，不需要计算；
mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性

3.6 Mutation

唯一改变 store 的计算属性；
有一个字符串的事件类型（type） 和回调函数（handler），回调函数状态更改的地方，并且 state 作为第一个参数；
store.commit 的方法调用 mutation；
是同步方法

3.7 Action

Action 提交的mutation，而不是直接变更状态；
Action 可以包含任意异步操作；
Action 可以通过 store.dispath 方法触发

3.8 Module

所有状态集中在一起非常臃肿，所以允许 store 分割模块。