如何在两个Vue文件间共享main.js中window.App的xyz变量？

嘿，这个需求其实很直接，咱们一步步来实现，确保1.vue能存数据、2.vue能实时读到更新后的值：

1. 先确认main.js里的App实例挂载正确 #

首先得保证你在main.js里确实把Vue实例挂载到了window.App上，这样全局才能访问到。参考下面的写法：

// main.js
new Vue({
  el: '#app',
  data() {
    return {
      xyz: '' // 初始化共享变量
    }
  },
  created() {
    // 将当前Vue实例挂载到window全局对象
    window.App = this;
  }
})

2. 在1.vue中写入共享数据 #

在1.vue里，你可以直接通过window.App.xyz来赋值，Vue的响应式系统会自动处理后续的更新通知。比如做个输入框实时同步：

<!-- 1.vue -->
<template>
  <div class="input-container">
    <input 
      v-model="localValue" 
      @input="syncToShared" 
      placeholder="输入内容存入共享变量"
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      localValue: ''
    }
  },
  methods: {
    syncToShared() {
      // 直接修改全局共享的xyz变量
      window.App.xyz = this.localValue;
    }
  }
}
</script>

3. 在2.vue中读取并响应式显示数据 #

为了让2.vue能实时感知到xyz的变化，最好用计算属性来包裹读取逻辑，这样数据更新时视图会自动刷新：

<!-- 2.vue -->
<template>
  <div class="display-container">
    <p>共享变量xyz的当前值：{{ sharedXyz }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    sharedXyz() {
      // 用可选链避免App未挂载时的报错，更稳妥
      return window.App?.xyz || '暂无数据';
    }
  }
}
</script>

额外提醒 #

• 这种全局挂载的方式适合小型项目或者简单的共享场景，如果是中大型项目，更推荐用Vuex（Vue2）或者Pinia（Vue3）来做状态管理，代码会更规范、更容易维护。
• 要注意组件访问window.App的时机，尽量在created钩子之后，避免实例还没挂载完成导致的undefined问题。

内容的提问来源于stack exchange，提问作者JustStartedProgramming