状态管理
- State：指的就是我们的==状态==，可以**暂时**理解为组件中`data`中的属性
- View：视图层，可以针对`State`的变化， 显示不同的信息
- Actions：这里的`Actions`主要是用户的各种操作，如点击、输入等，会导致状态发生变化
# state使用
1 导入Vuex.js
2 创建Vuex对象
3 给祖先组件加入store属性
4 页面中使用store中数据
## 导入Vuex.js
必须在引入Vue之后再引入Vuex
注意点：
只有需要共享的才放到vuex上, 不需要共享的数据依然放到组件自身的data上
## 在祖先组件中添加store属性
只要祖先组件中保存了Vuex对象 , 那么**祖先组件和所有的后代组件**就可以使用Vuex中保存的共享数据了
# Vuex修改数据
`Mutation`用于变更存储在`Store`中的数据。
- 只能通过`mutation`变更`Store`数据，不可以直接操作`Store`中的数据
- 通过这种方式，虽然操作稍微繁琐一些，但可以集中监控所有数据的变化，直接操作`Store`数据是无法进行监控的
## 定义Mutation函数
和store的state同级，定义mutations，里面定义修改sate中数据的方法。
## 调用
在组件中，通过`this.$store.commit(方法名)`完成触发。
## Mutation响应规则
`Vuex`的`store`中的`State`是响应式的，当`State`中的数据发生改变时，`Vue`组件也会自动更新。
# Vuex获取数据
## getters 定义
- Vuex允许我们在store中定义"getter" ，用于对state中存储的数据进行过滤操作。
- 就像vue生命周期中的computed一样，getter的返回值会根据它的依赖被**缓存**起来，且只有当它的依赖值发生了改变才会被重新计算。
|
