vue3 script里写setup 模式下 用pinia全局管理在兄弟页面存值 另一个兄弟页面监听值得变化

在Vue 3中，你可以使用Pinia全局状态管理库来在兄弟页面之间共享和监听数据的变化。以下是一个示例：

首先，在你的`main.js`文件中，创建并注册Pinia实例：

// main.js
import { createApp } from 'vue';
import { createPinia } from 'pinia';

import App from './App.vue';

const app = createApp(App);
const pinia = createPinia();

app.use(pinia);
app.mount('#app');

接下来，创建一个全局的Pinia store来管理数据：

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

export const useGlobalStore = defineStore('global', {
  state: () => ({
    sharedValue: '',
  }),
  actions: {
    setSharedValue(newValue) {
      this.sharedValue = newValue;
    },
  },
});

在上面的示例中，我们定义了一个名为`global`的store，其中包含了一个名为`sharedValue`的状态，并且提供了一个名为`setSharedValue`的action来更新该状态的值。

接下来，在兄弟页面中使用该全局store：

// BrotherA.vue
<template>
  <div>
    <input v-model="inputValue" placeholder="Enter a value" />
    <button @click="updateSharedValue">Update Value</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { useGlobalStore } from './store';

export default defineComponent({
  name: 'BrotherA',
  setup() {
    const globalStore = useGlobalStore();

    const inputValue = '';

    const updateSharedValue = () => {
      globalStore.setSharedValue(inputValue);
    };

    return {
      inputValue,
      updateSharedValue,
    };
  },
});
</script>

在上面的示例中，我们通过`useGlobalStore`函数来获取全局store的实例，并使用`setSharedValue` action来更新`sharedValue`的值。

最后，在另一个兄弟页面中监听`sharedValue`的变化：

// BrotherB.vue
<template>
  <div>
    <p>{{ sharedValue }}</p>
  </div>
</template>

<script>
import { defineComponent, watch } from 'vue';
import { useGlobalStore } from './store';

export default defineComponent({
  name: 'BrotherB',
  setup() {
    const globalStore = useGlobalStore();

    const sharedValue = globalStore.sharedValue;

    watch(
      () => globalStore.sharedValue,
      (newValue, oldValue) => {
        console.log('sharedValue changed:', newValue);
      }
    );

    return {
      sharedValue,
    };
  },
});
</script>

在上面的示例中，我们使用`watch`函数来监听`globalStore.sharedValue`的变化，并在发生变化时执行相应的操作。

通过以上设置，你可以在Vue 3中使用Pinia全局状态管理库，在兄弟页面之间共享和监听数据的变化。