浅谈Vue3兄弟组件通信：Reactive State

兄弟组件是指两个都挂载在同一个父组件下，但是两者之间没有直接关联的组件，如：

Father.vue
|- Child1.vue
|- Child2.vue

在这种层级关系下，组件之间要进行通信的话，通常会有两种选择：

1. Child2 -> Father -> Child1，即先将数据传给父组件，再通过父组件传递给子组件（不推荐）
2. 使用全局组件通信的方式实现

那接下来我们就重点聊聊全局组件通信是如何实现的……

全局组件通信定义

全局组件通信是指两个任意的组件，不管相互之间是否有联系，都可以直接进行交流的通信方案

常用的方法有：Event Bus、Reactive State、Vuex、Pinia

相信大家对EventBus和另外两个状态管理库都非常熟悉了，所以我们就重点来介绍一下Reactive State是如何进行数据传递的

Reactive State

在 Vue 3 里，使用响应式的 reactive API 也可以实现一个小型的状态共享库，如果运用在某一个简单的页面里这样小需求里，完全可以满足使用。

创建状态中心

首先我们创建一个state文件，并完成初始化

import { reactive } from 'vue' 
// 如果有多个不同业务的内部状态共享 
// 使用具名导出更容易维护 
export const state = reactive({ 
// 设置一个属性并赋予初始值 
message: 'Hello Reactive', 
// 添加一个更新数据的方法 
setMessage(msg: string) { this.message = msg }, 
})

就这样就完成了一个简单的Reactive State 响应式状态中心的创建

设定状态更新逻辑

我们在Child.vue组件里修改state.message的值

import { state } from '@/state'

console.log(state.message) // Hello Reactive 这里会直接打印出state中message的值

// 因为是响应式数据，所以我们还能监听数据的变化
watch(() => state.message, (val) => {
  console.log('Message 发生变化：', val)
})

// 我们对message的值进行修改
setTimeout(() => {
    state.setMessage('Hello State')
}, 1000)

观察全局状态变化

此时我们可以在另外一个组件里导入state并在模板中渲染其中的数据：

<template>
    <div>{{ state.message }}</div>
    <Child />
</template>

<script>
import Child from './Child.vue'
import { state } from '@/state'

</script>

可以观察到当 Child.vue 里的定时器执行时， 该组件的视图也会同步得到更新。

这样，一个无需额外插件即可实现的状态中心就这么完成了！