【Vuex---状态管理器的使用】

一、Vuex是什么？

Vuex在Vue项目开发时使用的状态管理工具。简单来说，就是对Vue的应用中多个组件的共享状态进行集中式的管理（读/写）

• Vuex实现了一个单向数据流，在全局拥有一个State存放数据，当组件要更改State中的数据时，必须通过Mutation进行，Mutation同时提供了订阅者模式供外部插件调用获取State数据的更新。
• 而当所有异步操作(常见于调用后端接口异步获取更新数据)或批量的同步操作需要走Action，但Action也是无法直接修改State的，还是需要通过Mutation来修改State的数据。最后，根据State的变化，渲染到视图上。

二、什么时候使用Vuex

适用场景： 构建一个中大型单页应用，可能会考虑如何更好地在组件外部管理状态，即多个组件共享状态：

• 多个视图依赖于同一状态：此时传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。
• 来自不同视图的行为需要变更同一状态：此时采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝，通常会导致无法维护的代码
  在这些情况下就适合用Vuex进行全局单例模式管理

三、Vuex的核心概念和API

流程：View -> Actions -> Mutations -> State -> View

1、state

(1)vuex 管理的状态对象:vuex的基本数据，用来存储变量
(2)它应该是唯一的

 state: {
   
    userId: '',
    name: '',
    token: '',
  }

在vue中使用 this.$store.state.userId

2、 mutations

mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。

  mutations: {
   
    SET_USER: (state, userId) => {
   
      state.userId = userId
    },
    SET_TOKEN: (state, token) => {
   
      // console.log(token)
      state.token = token
    }
  },

commit：同步操作，写法： this.$store.commit(‘mutations方法名’,值)
例如：

	this.$store.commit('SET_USER','123456')

3、 actions

actions：和mutation的功能大致相同，不同之处在于 ==>

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

3.通过执行: commit()来触发 mutation 的调用, 间接更新 state
4.谁来触发: 组件中通过this.$store.dispatch(‘action 名称’, data1) (dispatch：异步操作)
5.可以包含异步代码(axios)

  actions: {
    // {} 是es6中解构，把对象解构成属性
    login({
     commit }, value) {
   
      commit('SET_USER', value)
      // commit('SET_TOKEN', value2)
    },
    }

4、 getters

getters：从基本数据(state)派生的数据，相当于state的计算属性,具有返回值的方法
谁来读取: 组件中: this.$store.getters.xxx

  getter: {
   
    userIdDouble: function(state){
   
      retur