vue2中三个组件之间传值采用vuex进行组件传值 举实例并进行代码的详细实现与说明

当我们需要在 Vue 应用程序中进行组件之间的通信时，我们可以使用 Vuex 来简化这个过程。Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式。它集中管理应用程序的所有组件的状态，并允许我们以一种可预测的方式进行修改和操作。

举个例子，假设我们有三个组件：

- 父组件（Parent）
- 子组件1（Child1）
- 子组件2（Child2）

父组件和子组件1之间需要传递数据，子组件2需要访问父组件的数据。我们可以使用 Vuex 来实现这种组件之间的通信。

首先，我们需要创建一个 Vuex store，用于管理应用程序的状态：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    setMessage(state, payload) {
      state.message = payload
    }
  },
  actions: {
    setMessage({ commit }, payload) {
      commit('setMessage', payload)
    }
  },
  getters: {
    getMessage(state) {
      return state.message
    }
  }
})

export default store

这个 store 包含一个状态（message），一个 mutation（setMessage），一个 action（setMessage），以及一个 getter（getMessage）。

mutation 用于修改状态，而 action 用于触发 mutation。在这种情况下，我们只需要一个 mutation 和一个 action，因为我们只需要在父组件和子组件1之间传递数据。

现在，我们可以在父组件中使用 action 来设置 message 状态，然后在子组件1中使用 getter 来获取 message 状态：

<template>
  <div>
    <child1 />
  </div>
</template>

<script>
import child1 from './Child1.vue'
import { mapActions } from 'vuex'

export default {
  components: {
    child1
  },
  methods: {
    ...mapActions(['setMessage'])
  },
  mounted() {
    this.setMessage('Hello World!')
  }
}
</script>

在这个例子中，我们使用了 mapActions 来将 setMessage action 映射到组件的 methods 中。然后，在组件的 mounted 钩子中，我们调用 setMessage action 并传递一个字符串参数。

现在，我们可以在子组件1中使用 mapGetters 将 getMessage getter 映射到组件的 computed 中，然后在模板中使用它来获取 message 状态：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['getMessage']),
    message() {
      return this.getMessage
    }
  }
}
</script>

在这个例子中，我们使用了 mapGetters 将 getMessage getter 映射到组件的 computed 中。然后，在 computed 中我们定义了一个 message 计算属性来返回 getMessage getter。

最后，如果我们想让子组件2访问父组件的数据，我们可以使用 $store.state.message 来直接访问 message 状态。