vuex

1. 什么是vuex？
状态管理模式，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
这个状态自管理应用包含以下几个部分：

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


2. 安装

3. 引入
在store文件下的index.js文件中通过三行引入

在main.js文件中的new vue中，引入store，把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件，这样在组件中你可以通过this.$store来访问操作store中的state，action或者mutation

在main.js文件中操作store不需要像组件中this.$store，而是直接操作store.state或者store.commit就可以

store.state 来获取状态对象
store.commit 方法触发状态变更

• 需要监听的值
  由于 store 中的状态是响应式的，在组件中调用 store 中的状态简单到仅需要在计算属性computed中返回即可
  
• 直接展示的值，用插值表达式直接获取即可，不需要computed计算属性获取

通过提交 mutation 的方式，而非直接改变 store.state.count，是因为我们想要更明确地追踪到状态的变化。这个简单的约定能够让你的意图更加明显，这样你在阅读代码的时候能更容易地解读应用内部的状态改变

state中的值不仅可以只是字符串，数值，布尔值等单个字符，也可以是对象数据

4. 开始
Vuex 应用的核心就是 store（仓库）
store：仓库
state：状态

• Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

• 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

5. state
state：状态，也可以说是数据
在组件中获取state中数据的方法

• 通过computed计算属性return
  
• 插值获取
• 在data中获取
  
  如果一次需要获取多个数据的话，可以在computed计算属用mapState辅助函数
  首先在组件中引入mapState
  然后mapState可以通过三种方式获取state中的数据
• 箭头函数
• 传字符串参数
• 如果需要获取组件中的数据，必须使用常规函数
  
  6. Getters
  Getters是用来干什么的？
  如果你想从store中的state中的数据派生出一些状态来，或者说对state中的数据进行一些处理，筛选等，可以用Getters来操作，store中的Getters相当于组件中的computed

Getter可以接收state做为第一个参数，也可以接受其他 getter 作为第二个参数

在组件的computed计算属性中访问

7. mutation
mutation：更改store中state状态中的数据的唯一办法
mutation中回调函数就是我们实际进行状态更改的地方，可以接受state为第一个参数，第二个参数为载荷payload，payload可以是一个基本数据也可以是一个对象，这样可以包含多个字段信息

Mutation 需遵守 Vue 的响应规则

• 最好提前在你的 store 中初始化好所有所需属性。

• 当需要在对象上添加新属性时，你应该使用 Vue.set(obj, ‘newProp’, 123)

mutation一定要是同步的，不能是异步的
在严格模式下，直接修改state中的数据会报错，通过commit 提交 mutation 的方式来修改 state 时，vue的调试工具能够记录每一次state的变化，这样方便调试。但是如果是直接修改state，则没有这个记录

每个mutation执行完成后都会对应到一个新的状态变更，这样devtools就可以打个快照存下来，然后就可以实现 time-travel 了。如果mutation支持异步操作，就没有办法知道状态是何时更新的，无法很好的进行状态的追踪，给调试带来困难

8. action
Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。

如果需要获取到某个数据后，再触发mutation修改数据，这时的异步操作就需要用到action来操作

9. action和mutation的区别
1、流程顺序

“相应视图—>修改State”拆分成两部分，视图触发Action，Action再触发Mutation。

2、角色定位

基于流程顺序，二者扮演不同的角色。

Mutation：专注于修改State，理论上是修改State的唯一途径。

Action：业务代码、异步请求。

3、限制

角色不同，二者有不同的限制。

Mutation：必须同步执行。

Action：可以异步，但不能直接操作State。

仅记录