Vuex的全局状态管理

1、原理：Vuex是vue内置的全局全局状态管理，用来定义全局状态数据，其底层是基于EventBus通信进行的封装，因此Vuex中的全局状态数据具有单项响应式的特性。

2、Vuex的五个核心模块：

（1）state：定义全局状态数据，相当于Vue组件中的data数据源

（2）getter：对全局状态数据state进行处理，相当于Vue实例中的computed计算属性

（3）mutations：用来定义state数据的更改方法，此时的数据更改是同步的

（4）actions：用来定义state数据更改的异步操作，注意actions内部的方法无法直接修改state内部的数据，需要借助于mutations内部的方法进行更改

（5）modules：当全局状态过多时利用模块进行划分，方便管理

3、使用方式（一共有两种方式可访问vuex数据和方法，此处方法是通过辅助函数进行数据访问和数据修改）

（1）访问state数据

使用Vuex的辅助函数mapState进行数据获取

第一步：在需要使用全局数据的组件中导入辅助函数 

// 第一步 导入需要使用的辅助函数
import { mapState } from 'vuex';

第二步：在计算属性内部使用扩展运算符打开获取到的数据

      // 注意 需要获取的state数据通过数组的方式获取 以数组的形式返回 使用扩展运算符... 进行解构
        
        ...mapState(['count','msg'])

（2）getter数据处理

第一步在全局状态管理对象中定义数据修改方法

    // 字符串反转
    reservesMsg(state) {
      // 参数state是state对象 访问需要修改的数据
      return state.msg.split('').reverse().join('')
    }

第二步通过辅助函数将getter方法解构到需要使用的组件中

// 第一步 导入需要使用的辅助函数
import { mapState,mapGetters } from 'vuex';


computed:{
// 第二步 将getter方法解构在计算属性computed内部
 ...mapGetters(['reservesMsg'])
}

(3)muations 数据处理的方法的使用（同步处理）

第一步在muations中定义好数据处理的方法

    // 用来定义state数据的同步更改方案，参数一代表更改之前的state，参数二代表更改时外界传递的数据
    increatement(state,params){
      state.count += params 
    }

第二步 在需要使用的组件内部的methods中进行导入方法（导入后直接使用即可）

// 第一步 导入需要使用的辅助函数
import { mapState, mapGetters, mapMutations } from 'vuex';


// 第二步
methods:{
  // mutations方法解构到methods中
    ...mapMutations(['increatement'])
}

// 第三步

<!-- 在触发事件的标签中传递参数 -->
<button @click="increatement(2)">按钮</button>

（4）actions（异步数据的更改）

第一步 在actions中定义异步方法

    async increatementAsync(store, params) {
      //action用来定义异步任务,store是一个和全局store类似的对象,负责在内部触发mutations操作.params用来接收外部传递的数据 
      const count = await getRandom(params.min, params.max)
      store.commit('increatement', count)
    }

第二步 在使用的组件中使用辅助函数将方法解构在组件实例对象的methods方法中

// 第一步 导入需要使用的辅助函数

import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';

// 第二步

methods：{
    // 将actions内部的方法解构到methods中
     ...mapActions(['increatementAsync'])
}
// 第三步 在触发事件的标签中进行调用和传递参数

<button @click="increatementAsync({ min: 1, max: 4 })">异步更改数据</button>