Vuex是什么？如何使用

Vuex：是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据共享。
(1) 如果是Vue2的环境，不能使用vuex4的版本，所以我们需要安装vuex3以下的版本安装。

  创建项目：vue create vue2
  访问vue2目录：cd vue2
  启动脚手架：npm或yarn serve
  安装vuex：由于vue2不能使用vuex4的版本，所以在安装时需要指定版本3，npm i vuex@3
            
  配置vuex：
   步骤一：新建文件夹store，文件夹下新建index.js文件
   步骤二：index.js中完成配置：还没有配置数据和事件

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// 用来存储数据
const state = {
count：0
}
// 响应组件中的事件
const actions = { }

// 操作数据
const mutations = { }

// 用来将state数据进行加工
const getters = { }

// 新建并暴露store
export default new Vuex.Store({
state,
actions,
mutations,
getters
}）

步骤三：main.js中引入

import Vue from 'vue'
import App from './App.vue'
import store from './store/index';

Vue.config.productionTip = false

new Vue({
render: h => h(App),
store}).$mount('#app')

（2）如果是Vue3的环境，使用vuex4的版本。 npm install vuex@next

     配置vuex：      
     步骤一：新建文件夹store，文件夹下新建index.js文件
     步骤二：index.js中完成配置：还没有配置数据和事件
     import { createStore } from 'vuex'
     export default createStore({
          state: {
               //数据存放的位置
               count: 0
        },
mutations: { },
actions: { },
modules: { }

})

步骤三：在main中放入内容

import { createApp } from 'vue'
import App from './App.vue'
import store from './store/index.js';
createApp(App).use(store).mount("#app")

Vuex中的核心概念：
1、state:提供唯一的公共数据源，所有共享的数据都要放到store中的state中。
(1) 组件访问state中的数据的第一种方法：
首先在state中创建变量值count
const state = {
count：0
}
然后再调用的组件中需要变量{{$store.state.count}}

 (2)第二种方法：利用vuex中的mapState方法
 
     首先引入mapState方法：import { mapState } from 'vuex';
     然后在通过刚才导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性，这样在需要count变量的地方这样引用{{count}}就可以了

     computed: {
         ...mapState(['count'])
      }

2、mutations：用于变更store中的数据，我们不能直接操作store中的数据，所以只能在mutations操作。
(1)mutations变更数据的第一种方法
首先mutations中定义函数add，state是固定的传递的值，如下所示：
mutations: {
add(state) {
state.count++;
}
}
也可以传递参数写法如下：

       mutations: {
          add(state, num) {
              state.count+=num;
          }
        }

      然后在需要调用的组件的methods方法中定义函数，用this.$store.commit('add（调用mutations中定义的方法）')
       methods:{
           addData(){
              this.$store.commit('add')
           }
       }

    addData这个方法应用在组件中某个操作上。


   (2)mutations变更数据的第二种方法
       首先在vuex中按需引入mapMutations
       import { mapMutations } from 'vuex';

       通过刚才导入的mapMutations函数，将需要的mapMutations函数，映射为当前组件的methods方法

         methods:{
 ...mapMutations(["plus"])
         },   然后这个plus方法可以直接用在相关的组件上。

3、actions： 异步操作 State中的数据

 (1) actions变更数据的第一种方法，定义异步函数，固定传参context 对象，payload是参数,可以调用 context.commit 提交一个 mutation

      actions: {
         addAsync(context, payload) {
            setTimeout(() => {
               context.commit('add', payload);    
            }, 1000);
          },
       },
      然后在 Vue 组件中，我们可以使用 dispatch 方法触发 Action。并且传递参数
      this.$store.dispatch(' addAsync', 10);

 (2) actions变更数据的第二种方法，还是在需要使用的组件中从vuex按需导入mapActions。
      import { mapActions } from 'vuex';
     通过刚才导入的mapActions函数，将需要的mapActions函数，映射为当前组件的methods方法

      methods:{
          ...mapActions(["plus"]),
      },

4、Getters： 用于将 State中的数据加工处理形成新的数据。类似与vue中的computed属性
(1) getters处理数据的第一种方法
首先定义getters中处理函数的方法如下：
const getters = {
showNum(state) {
return '当前最新的数量是：' + state.count
}
}
然后在使用的组件中直接调用：this.$store.getters.名称

  (2) getters处理数据的第二种方法，还是在需要使用的组件中从vuex按需导入mapGetters。
 
       import { mapGetters } from 'vuex';
       通过刚才导入的mapGetters函数，将需要的mapGetters函数，映射为当前组件的computed方法。
 
         computed: {
            ...mapGetters(['showNum'])
         }

        然后在使用的组件中直接调用：showNum这个名称