【Vuex】小白都能看懂的Vuex

众所周知，看文档是很重要的

1. Vuex是什么

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

可以认为它是一个前端数据库，可以随时存取数据，对于整个前端是共享且同步的。

2. 使用Vuex的好处

在以下两种情况下，普通的方法是很麻烦做到，或者做不到的。

1. 多个视图依赖于同一状态。

在兄弟组件中，维护同一状态是无能为力的

2. 来自不同视图的行为需要变更同一状态。

就好像两个页面会互相影响，这需要我们在每个页面加入传值参数，代码变得更难维护。

3. Vuex的核心概念

• State
  用来存放组件之间共享的数据。他跟组件中的data选项，只不过组件中data是用来存放组件的私有数据。
• Getter
  有时候我们需要从 store 中获取一些数据，使用Getter来获取，Getter可以对数据进行操作，类似于computed。
• Mutation
  更改 Vuex 的 store 中的状态的唯一方法，且为同步方法，类似methods。
• Action
  Action会通过Mutation，让Mutation帮他提交数据的变更。
  Action支持异步请求
• Module
  当应用变得非常复杂时，store 对象就有可能变得相当臃肿。Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。

3. Vuex操作流程

image.png

• 登录
  1. 首先调用actions里的登录方法（这里是一个异步的方法）
  2. 返回结果后调用mutations中的SET_INFO方法
  3. 而SET_INFO去修改state中的userInfo信息
• 获取用户信息
  1. 这里调用getter中方法getUserInfo
  2. 然后就会返回当前state中userInfo的数据
• 修改用户信息
  1. 类似获取信息，这里调用mutations中的SET_USERINFO方法
  2. SET_USERINFO方法修改state中的userInfo

总结：

1. state中只维护当前需要存的数据，定义好即可
2. 修改state中的数据需要通过mutations中的方法
3. mutations中的方法必须为同步的，例如（state.token = token）
4. 修改state中的数据需要通过getter中的方法
5. actions中可以使用异步方法