如何使用vuex实现兄弟组件通信

熟悉Vue框架的人都知道，在Vue组件之间传递数据的方法实在是太多了，包括props、$emit、$parent、$root等等，那么这些方法是否可以满足所有的组件通信需求呢？答案是不一定，有些情况下，我们需要一些更高级的方法来进行组件通信，这时候，Vuex就成了我们事半功倍的存在。

Vuex是什么？
Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex的核心思想是将应用程序的内部状态和组件的变化分离出来，并建立一个全局的状态机来管理。

事实上，使用Vuex进行兄弟组件通信的方式并不是特别常见，但是在某些复杂的组件通信场景下，它确实是一个非常好的选择。接下来，我们将详细讲解如何使用Vuex来实现兄弟组件通信：

Vuex的安装

首先我们需要在我们的Vue项目中引入Vuex，可以通过以下命令安装：

npm install vuex --save

创建Vuex Store

Vuex Store是我们的数据存储中心，我们可以在这里定义全局通用的状态和方法，并将其注入到Vue实例中供应用程序使用。通常，我们可以在src/store目录中创建一个store.js文件，并在该文件中创建我们的Vuex Store，如下所示：

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

这里我们定义了一个store，其中包含一个使用count作为状态和一个名为increment的方法，该方法的任务是将state.count的值加1.

在父组件中使用Vuex Store

接下来我们需要在Vue组件中引用Vuex Store，以使其可以在我们的组件中使用。此时，我们可以通过在Vue实例中引入Vuex Store并将其作为store的属性来实现：

import Vue from "vue";
import App from "./App.vue";
import store from "./store";

new Vue({
  store,
  render: h => h(App)
}).$mount("#app");

在这里，我们引入了我们的components/App.vue文件，并在创建Vue实例之前将其注入到store属性中。

在兄弟组件中使用Vuex Store

当您已经将store注入到Vue实例中后，您可以很容易地在您的Vue组件中使用该store。在我们的兄弟组件示例中，我们有一个名为ChildA的组件，它需要对Vuex Store进行写入操作（在这个示例中仅进行计数器的自增运算），并且我们有另一个名为ChildB的组件，需要从Vuex Store中读取count的值，并在其组件模板中将其显示出来。

<template>
  <div>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { mapMutations } from "vuex";

export default {
  methods: {
    ...mapMutations(["increment"])
  }
};
</script>

在ChildA组件中，我们使用了mapMutations映射工具把increment函数映射到了该组件的methods中，这使我们可以在组件模板中通过@click="increment"来运行该函数。

<template>
  <div>
    Count: {{ count }}
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  computed: {
    ...mapState(["count"])
  }
};

在ChildB组件中，我们使用了mapState映射工具把count变量映射到了该组件的computed属性中，这使我们可以在组件模板中直接使用{{ count }}来读取该Store中的状态。