Vue中能否从其他组件访问App.vue内的变量？如何实现？

可以访问，但默认情况下App.vue的user是组件内部的响应式状态，不会暴露给外部。如果要通过导出导入的方式实现，需要调整代码把状态暴露出来，下面是具体操作：

实现步骤 #

1. 修改App.vue，导出全局状态对象 #

把user同时挂载到一个可导出的全局对象上，确保组件内的状态和全局对象同步：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
// 导出一个全局状态对象，用来共享user
export const appGlobalState = {
  user: null
}

export default {
  name: 'App',

  data() {
    return {
      // 让组件内的user和全局对象的user保持同步
      user: appGlobalState.user
    }
  },

  methods: {
    getUser() {
      axios 
        .get(`auth/user/`)
        .then(response => {
          const userId = response.data.pk
          this.user = userId
          // 同时更新全局对象的user值
          appGlobalState.user = userId
        })
    }
  },

  beforeMount() {
    this.getUser();
  },
}
</script>

2. 在其他组件中导入并访问 #

在需要获取user的组件里，直接导入appGlobalState，通过计算属性实时获取最新值：

<template>
  <div>当前用户ID：{{ currentUser }}</div>
</template>

<script>
// 注意路径要根据你的项目结构调整，@通常指向src目录
import { appGlobalState } from '@/App.vue'

export default {
  name: 'OtherComponent',
  computed: {
    currentUser() {
      return appGlobalState.user
    }
  }
}
</script>

几点说明 #

• 这种方式虽然能实现跨组件访问，但不推荐在中大型项目里用：全局变量没有统一的状态管理规则，后续维护时很难追踪user的修改记录，容易引发状态混乱。
• 更规范的方案是用状态管理工具：Vue 2用Vuex，Vue 3用Pinia，专门处理全局状态共享的场景，能更好地管控状态的修改和流转。
• 另外也可以用Vue内置的provide/inject特性：在App.vue中通过provide暴露user，其他组件用inject接收，这种方式更符合Vue的组件通信逻辑，不需要依赖全局变量。

举个provide/inject的简单例子（Vue 3适配）：
App.vue修改部分代码：

<script>
export default {
  // ...其他代码
  provide() {
    return {
      // Vue 3中直接返回响应式的user即可
      user: this.user
    }
  }
}
</script>

其他组件中接收：

<script>
export default {
  inject: ['user'],
  // 直接在模板或计算属性中使用this.user即可
}
</script>

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