做头像网站有哪些百度推广管家
**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这个名称