在A页面中修改vuex中的变量，B页面同步修改显示

为了实现A页面修改 Vuex 中的变量，B 页面同步修改显示，可以通过在 B 页面中订阅 Vuex 的状态来实现。

在 B 页面中，可以通过 `mapState` 方法将 Vuex 的状态映射到组件的计算属性中：

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['myVariable'])
  }
}

然后在 `myVariable` 发生变化时，B 页面中的显示也会自动更新。

在 A 页面中修改 Vuex 的状态，可以通过提交一个 mutation 来实现：

this.$store.commit('updateMyVariable', newValue)

其中，`updateMyVariable` 是一个在 Vuex 中定义的 mutation 方法，用于更新 `myVariable` 的值：

mutations: {
  updateMyVariable(state, newValue) {
    state.myVariable = newValue
  }
}

这样，当 A 页面修改 `myVariable` 的值时，B 页面中的显示也会自动更新。

相关问题

在A页面中修改vuex中的变量，B页面怎么监控并同步修改信息

在B页面中，你可以通过在`computed`或`watch`中访问对应的Vuex变量，来监控该变量的变化并同步修改信息。具体实现步骤如下：

1. 在B页面中引入Vuex的`mapState`辅助函数，将Vuex中需要共享的变量映射到B页面的计算属性中。

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['varA', 'varB', ...])
  },
  ...
}

2. 在`computed`中对映射的变量进行监听，可以通过`setter`方法来响应变量的修改，然后在该方法中执行对应的修改操作。

computed: {
  ...mapState(['varA', 'varB']),
  syncedVarA: {
    get() {
      return this.varA
    },
    set(value) {
      // 对varA进行修改并同步到Vuex
      this.$store.commit('updateVarA', value)
    }
  }
}

3. 在B页面中使用`watch`监听Vuex中对应的变量，然后对该变量进行同步修改操作。

export default {
  watch: {
    varA(newValue, oldValue) {
      // 对varA进行修改并同步到B页面中
      this.syncedVarA = newValue
    },
    ...
  },
  ...
}

这样，当A页面中修改了Vuex中的`varA`变量时，B页面中对应的`syncedVarA`属性会被更新并触发`watch`方法进行同步修改。当然，这里的实现方式可以根据实际需求进行调整。

一个vue页面有user_name变量，我想在另一个vue页面更改这个user_name变量的值，如何操作

在Vue中，如果你想要在一个组件（A）更改另一个组件（B）中的变量，这通常涉及到两个组件之间的数据传递。这里有两种常见的方式：

1. **props和methods**:
如果你是在父子组件之间共享数据，可以使用`props`。在父组件(A)中设置`user_name`，然后作为prop传给子组件(B)，在子组件内部可以使用`this.$emit('update:user_name', newValue)`触发父组件更新用户名。

示例（A组件）:

   <template>
     <b-user-name :user_name="user_name" @updateUserName="handleUserNameUpdate"></b-user-name>
   </template>

   <script>
   export default {
     props: {
       user_name: {
         type: String,
         default: '',
       },
     },
     methods: {
       handleUserNameUpdate(value) {
         this.user_name = value;
       }
     },
   }
   </script>

示例（B组件）:

   <template>
     <input v-model="user_name" @input="$emit('update:user_name', user_name)">
   </template>

2. **Vuex** (推荐):
如果数据需要在整个应用共享，并且需要状态管理和控制，那么建议使用Vuex。将`user_name`存储在Vuex store中，这样任何地方都可以通过`this.$store.state`或`this.$store.commit('setName', newValue)`来更改它。

以上两种方法的选择取决于你的应用需求和复杂度。如果只需要在单一层次间共享数据，`props`足够；如果需要更复杂的场景，如状态管理和同步，就该考虑Vuex了。