Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
如果使用的是Vue2,安装vuex3.x的版本,如果使用的是Vue3,安装vuex4.x的版本
1.引入vuex
在main.js中引入
Vue2:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
changeCount (state,count) {
state.count=count
}
}
})
Vue3:
import { createApp } from 'vue'
import { createStore } from 'vuex'
import App from "./App.vue";//App 为根组件
// 创建一个新的 store 实例
const store = createStore({
state () {
return {
count: 0
}
},
mutations: {
changeCount (state,count) {
state.count=count;
}
}
})
const app = createApp(App)//括号中放根组件
// 将 store 实例作为插件安装
app.use(store)
2.state和mutation
state:就是单一状态,可以理解为数据源
mutation:类似于事件,里面放置回调函数,即进行状态(数据)更改的地方,并接受state作为第一个参数
3.组件之间通信
在上面的例子中,我们在state中定义了数据count,在mutations中定义了方法changeCount来改变这个数据,假设我们有组件A和组件B,我希望在组件A中改变count,然后组件B接收到count的改变
组件A:
在组件A的methods中定义函数changeData,组件A中想要改变count值的时候就调用这个方法,通过commit触发前面在mutation中定义的函数,就改变了count数据了
changeData(count){
this.$store.commit("changeCount",count);
},
组件B:
组件B想要拿到这个数据,首先数据要定义在 computed中通过this.$store.state.count
获取count数据,然后在watch中监听这个数据的变化,若数据变化则调用函数processCountData
computed:{
countData(){
return this.$store.state.count;
},
},
watch:{
countData:{
handler:function(){
this.processCountData();
},
deep:true
},
}