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这个名称
网友评论