Vue 3 全局变量

在 Vue 3 中，我们可以使用createApp创建实例，然后在实例中注册全局变量。这个方法和 Vue 2 中不同， Vue 2 中使用Vue.prototype去注册全局变量。

注册全局变量

在 Vue 3 中，我们需要在创建实例之前定义全局变量，并在创建实例时将其添加到其选项中。

// 在创建实例之前定义全局变量
const globalVariable = 'I am a global variable'

const app = createApp({
  // 添加全局变量到实例的选项中
  mounted() {
    console.log(this.globalVariable) // "I am a global variable"
  }
})

// 全局变量可以以不同的方式定义
// 1. 通过 app.config.globalProperties 定义
app.config.globalProperties.globalVariable = globalVariable

// 2. 通过 app.mixin 定义
app.mixin({
  mounted() {
    console.log(this.globalVariable) // "I am a global variable"
  },
  computed: {
    globalVariable() {
      return globalVariable
    }
  }
})

// 3. 通过 app.provide/inject 定义
const globalVariableKey = Symbol()
app.provide(globalVariableKey, globalVariable)

使用全局变量

一旦定义了全局变量，我们就可以在实例的任何组件中使用它。

<template>
  <div>{{ globalVariable }}</div>
</template>

<script>
export default {
  mounted() {
    console.log(this.globalVariable) // "I am a global variable"
  },
  computed: {
    globalVariable() {
      return this.$root.globalVariable
    }
  }
}
</script>

使用this.$root.globalVariable可以访问全局变量。

总结一下，Vue 3 中定义全局变量需要在创建实例之前定义，并在创建实例时将其添加到其选项中。全局变量的定义可以通过app.config.globalProperties、app.mixin和app.provide/inject来实现。在实例的组件中可以使用this.$root.globalVariable来访问全局变量。