Vue3中两个兄弟页面，如何在当前A页面中修改B页面的值

在Vue3中，如果想要在A页面修改B页面的数据，通常需要通过单向数据流原则（如Vuex或Event Bus）来实现跨组件间的通信，因为直接修改其他组件的属性是不推荐的，特别是当这两个组件不是父子关系时。

以下是使用Vuex进行状态管理的一种方案：

1. **创建Vuex store** - 在项目根目录下创建一个`store.js`文件，初始化一个Vuex实例，并定义一个共享的状态树，比如：

import { createStore } from 'vuex';

const state = {
  valueForB: ''
};

const mutations = {
  updateValueForB(state, newValue) {
    state.valueForB = newValue;
  }
};

export default createStore({
  state,
  mutations
});

2. **在A页面中触发更新** - 当在A页面需要修改B页面的值时，通过dispatch（发出）mutations:

<template>
  <button @click="updateValueInB">修改B页面</button>
</template>

<script>
import { mapActions } from 'vuex';
export default {
  methods: {
    ...mapActions(['updateValueForB']),
    updateValueInB() {
      this.updateValueForB('新值');
    }
  }
};
</script>

3. **在B页面中监听变化** - B页面需要监听Vuex的state变化，这通常在`beforeCreate`钩子中做订阅：

<template>
  <div v-model="valueFromStore"></div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  computed: {
    ...mapState(['valueForB']), // 使用mapState获取valueForB
    valueFromStore() {
      return this.valueForB;
    }
  },
  beforeCreate() {
    const unsubscribe = store.subscribe((mutation, state) => {
      if (mutation.type === 'UPDATE_VALUE_FOR_B') {
        this.valueFromStore = state.valueForB; // 更新本地计算属性
        unsubscribe(); // 订阅结束后移除，避免内存泄露
      }
    });
  }
};
</script>