开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第34天，点击查看活动详情
上一篇文章中我们在项目里面引入了vuex，并且完成了配置，接下来将为大家介绍一下vuex的State,Getter,Mutation,Action,Module这五个核心概念
- State(单一状态树)
- 存储在 Vuex 中的数据和 Vue 实例中的 data 遵循相同的规则，例如状态对象必须是纯粹的。
- 简单来说这个State就相当于我们每一个页面中的data中return出来的数据，是用户自己定义的一个可变的动态数据，State里面存储的数据是响应式的可变的
- 在State里面定义的一些响应式数据我们可以在项目中的任何一个页面中通过this.$store.（变量名称）来获取到，然后渲染到相应的页面上去
- Getter
- 有时候我们需要从 store 中的 state 中派生出一些状态，就需要用到Getter,。Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。
- 所以Getter就相当于一个计算属性
- Mutation
- 当我们需要更改State中定义的数据的时候，我们可以使用到Mutation,更改vuex中的Store中的状态的唯一方法就是提交mutation，mutation相当一个事件方法
- 我们使用mutation的时候需要调用store.commit方法来提交我们更改数据的方法
- Action
-
Action 类似于 mutation，不同在于：
-
Action 提交的是 mutation，而不是直接变更状态。
-
Action 可以包含任意异步操作。
-
因为可以执行异步操作的原因，所以Action可以用来发送请求获取数据
- Module
- Module可以用来管理模块的局部状态，Vuex 允许我们将 store 分割成模块
