vuex实现组件之间通信

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
     },
 }