// useMessageStore.js
  import { defineStore } from 'pinia';

  export const useMessageStore = defineStore('message', {
    state: () => ({
      message: ''
    }),
    actions: {
      setMessage(msg) {
        this.message = msg;
      }
    }
  });

  <template>
    <button @click="sendMessage">发送消息</button>
  </template>

  <script setup>
  import { useMessageStore } from '@/stores/useMessageStore';

  const messageStore = useMessageStore();

  function sendMessage() {
    messageStore.setMessage('Hello from Component A');
  }
  </script>

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

  <script setup>
  import { useMessageStore } from '@/stores/useMessageStore';
  import { watch } from 'vue';

  const messageStore = useMessageStore();

  // 使用 watch 监听 message 的变化
  watch(() => messageStore.message, (newMessage) => {
    console.log('Received message:', newMessage);
  });
  </script>

在上面的接收消息组件中，我们使用了 Vue 3 的 `watch` 函数来监听 `message` 状态的变化。当 `message` 状态被更新时，`watch` 函数会自动执行，从而实现实时接收消息的效果。

通过这种方式，你可以在 Vue 3 中实现非父子组件或非祖先-后代组件之间的通信，并且能够实时响应状态的变化。Pinia 提供了一种集中式的状态管理方式，使得组件间的通信变得更加简单和高效。