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