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

前言

vuex主要是是做数据交互，父子组件传值可以很容易办到，但是兄弟组件间传值，需要先将值传给父组件，再传给子组件，异常麻烦。

下面这篇文章就来给大家介绍下vuex兄弟组件通信的方法，下面话不多说了，来一起看看详细的介绍吧

1. 核心想法

使用vuex进行兄弟组件通信的核心思路就是将vuex作为一个store(vuex被设计的原因之一)，将每个子组件的数据都存放进去，每个子组件都从vuex里获取数据，其实就是一句话——把vuex作为一个桥

2. 具体代码

父组件app.vue

<template>
 <div id="app">
 <childa/>
 <childb/>
 </div>
</template>

<script>
 import childa from './components/childa' // 导入a组件
 import childb from './components/childb' // 导入b组件

 export default {
 name: 'app',
 components: {childa, childb} // 注册a、b组件
 }
</script>

<style>
 #app {
 font-family: 'avenir', helvetica, arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
 }

 div {
 margin: 10px;
 }
</style>

子组件childa

<template>
 <div id="childa">
 <h1>我是a组件</h1>
 <button @click="transform">点我让b组件接收到数据</button>
 <p>因为你点了b，所以我的信息发生了变化：{{bmessage}}</p>
 </div>
</template>

<script>
 export default {
 data() {
 return {
 amessage: 'hello，b组件，我是a组件'
 }
 },
 computed: {
 bmessage() {
 // 这里存储从store里获取的b组件的数据
 return this.$store.state.bmsg
 }
 },
 methods: {
 transform() {
 // 触发receiveamsg，将a组件的数据存放到store里去
 this.$store.commit('receiveamsg', {
  amsg: this.amessage
 })
 }
 }
 }
</script>

<style>
 div#childa {
 border: 1px solid black;
 }
</style>

子组件childb

<template>
 <div id="childb">
 <h1>我是b组件</h1>
 <button @click="transform">点我让a组件接收到数据</button>
 <p>因为你点了a，所以我的信息发生了变化：{{amessage}}</p>
 </div>
</template>

<script>
 export default {
 data() {
 return {
 bmessage: 'hello，a组件，我是b组件'
 }
 },
 computed: {
 amessage() {
 // 这里存储从store里获取的a组件的数据
 return this.$store.state.amsg
 }
 },
 methods: {
 transform() {
 // 触发receivebmsg，将b组件的数据存放到store里去
 this.$store.commit('receivebmsg', {
  bmsg: this.bmessage
 })
 }
 }
 }
</script>

<style>
 div#childb {
 border: 1px solid green;
 }
</style>

vuex模块store.js

import vue from 'vue'
import vuex from 'vuex'

vue.use(vuex)

const state = {
 // 初始化a和b组件的数据，等待获取
 amsg: '',
 bmsg: ''
}

const mutations = {
 receiveamsg(state, payload) {
 // 将a组件的数据存放于state
 state.amsg = payload.amsg
 },
 receivebmsg(state, payload) {
 // 将b组件的数据存放于state
 state.bmsg = payload.bmsg
 }
}

export default new vuex.store({
 state,
 mutations
})

我把所有的代码+注释都放在github了，，

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。