如何在Vue 3组件中使用原生JavaScript全局变量？

报错原因 #

Vue模板的作用域绑定当前组件实例，你导入的personData是模块级全局变量，并没有挂载到组件实例上，所以模板无法直接访问它，导致“未定义”的报错。

解决方案（满足全局变量需求） #

方案1：组件内映射到计算属性 #

这种方式适合仅在当前组件使用全局变量的场景，修改全局变量的属性会同步到原对象：

<template>
  <div> Hello {{ personData.name }} {{ personData.last }} </div>
  <button @click="signOut"> Sign Out </button>
</template>

<script>
import { personData } from '<你的实际文件路径>'

export default {
  computed: {
    // 将全局变量映射到组件实例的计算属性
    personData() {
      return personData
    }
  },
  methods: {
    signOut() {
      personData.signed_in = false;
    }
  }
}
</script>

方案2：挂载到Vue全局属性（全组件通用） #

如果需要所有组件都能直接使用这个全局变量，无需每次导入，可以挂载到Vue全局属性：

Vue 2 版本

在main.js中配置：

import Vue from 'vue'
import { personData } from '<你的实际文件路径>'

// 挂载到Vue原型，所有组件可通过this.$personData访问
Vue.prototype.$personData = personData

组件中使用：

<template>
  <div> Hello {{ $personData.name }} {{ $personData.last }} </div>
  <button @click="signOut"> Sign Out </button>
</template>

<script>
export default {
  methods: {
    signOut() {
      this.$personData.signed_in = false;
    }
  }
}
</script>

Vue 3 版本

在main.js中配置：

import { createApp } from 'vue'
import App from './App.vue'
import { personData } from '<你的实际文件路径>'

const app = createApp(App)
// 挂载到全局属性，所有组件模板可直接用$personData访问
app.config.globalProperties.$personData = personData
app.mount('#app')

组件（<script setup>语法）中使用：

<template>
  <div> Hello {{ $personData.name }} {{ $personData.last }} </div>
  <button @click="signOut"> Sign Out </button>
</template>

<script setup>
import { getCurrentInstance } from 'vue'

// 获取全局属性
const { appContext } = getCurrentInstance()
const personData = appContext.config.globalProperties.$personData

const signOut = () => {
  personData.signed_in = false
}
</script>

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