Question

无论是用户点击 ChatItem 组件选中一个聊天会话，还是 ChatBoard 渲染完成后选中一个聊天会话，都应该通知其他组件，选中的聊天会话变更了。

在 MessageBoard 组件中演示这个功能，代码如下所示：

src/renderer/window/WindowMain/chat/components/MessageBoard.vue

<template>
  <div class="MessageBord">
    <BarTop />
    <div class="MessageList">{{ logInfo }}</div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import BarTop from '../../../../components/BarTop.vue';
import { useChatStore } from '../../../../store/useChatStore';
let store = useChatStore();
let logInfo = ref("");
let curId = "";
//订阅 Store 内数据的变化
store.$subscribe((mutations, state) => {
  let item = state.data.find((v) => v.isSelected);
  let id = item?.id as string;
  if (id != curId) {
    logInfo.value = `现在应该加载 ID 为${item?.id}的聊天记录`;
    curId = id;
  }
});
</script>

<style scoped lang="scss">
.MessageBord {
  height: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
}
.MessageList {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: rgb(245, 245, 245);
}
</style>

使用 store 对象的 $subscribe 方法订阅了数据变更事件，无论什么时候 store 内的数据发生了变化，都会执行 $subscribe 方法提供的回调函数。

在订阅回调中，验证选中的会话是否发生了变化（有可能是当前 store 其他数据对象的变化触发了订阅回调），如果是，那么就给出提示。

订阅回调函数有两个参数 ，第一个是 mutations 参数，这个参数的 events 属性携带着变更前的值和变更后的值，但这个属性只有在开发环境下存在，生产环境下不存在。订阅的第二个参数是 state，这个参数包含 store 中的数据。

以这种方式更新 store 里的数据，不利于复用数据更新的逻辑，改用可以复用数据更新逻辑的方案。