vuex如何进行状态管理？

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

创建项目：vue create vue2
访问vue2目录：cd vue2
启动脚手架：npm或yarn serve

安装vuex：
由于vue2不能使用vuex4的版本，所以在安装时需要指定版本3，npm i vuex@3 --save

配置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(["add"])
},   
然后这个add方法可以直接用在相关的组件上。

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这个名称