如何在Vue组件中调用全局变量？请修正模板中的错误调用方式

我来帮你搞定这个问题！你在母版页把用户ID挂载到window.App上的思路没问题，但直接在Vue模板里访问window.App.user并不是最优写法，而且可能引发作用域或初始化顺序的问题。下面给你两种靠谱的修正方案：

方案1：将全局变量引入组件内部状态 #

这种方式适合单个组件使用该变量的场景，把全局变量赋值给组件的data属性，让模板直接访问组件内部的状态：

首先在组件的script部分添加：

export default {
  data() {
    return {
      // 把全局的用户ID赋值给组件内部的状态
      currentUserId: window.App.user
    }
  }
}

然后修改模板，直接使用组件内部的currentUserId：

<template lang="html">
  <div class="chat-message" v-if="message.user_from == currentUserId">
    <div class="chatright">
      {{message.user_from}} {{message.msg}}
    </div>
  </div>
  <div class="chatleft" v-else>
    <!-- 左侧聊天内容的代码 -->
  </div>
</template>

这样做的好处是：模板代码更清晰，符合Vue组件化的设计思路，避免直接依赖全局window对象，也方便后续对这个值做响应式处理（如果需要的话）。

方案2：挂载到Vue原型实现全局复用 #

如果你的多个组件都需要用到这个用户ID，可以把它挂载到Vue的原型上，这样所有组件都能直接访问：

在Vue的入口文件（比如main.js）中添加：

// 把window.App.user挂载到Vue原型，所有组件都可以通过this.$currentUserId访问
Vue.prototype.$currentUserId = window.App.user;

然后在组件模板里直接使用$currentUserId：

<template lang="html">
  <div class="chat-message" v-if="message.user_from == $currentUserId">
    <div class="chatright">
      {{message.user_from}} {{message.msg}}
    </div>
  </div>
  <div class="chatleft" v-else>
    <!-- 左侧聊天内容的代码 -->
  </div>
</template>

注意事项 #

一定要确保母版页的<script>代码（定义window.App的部分）在Vue的脚本之前加载，这样Vue组件初始化时才能拿到正确的用户ID值，避免出现undefined的情况。

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