vue3 定义全局变量踩的坑 | 自记

之前使用若依框架的时候，源码中定义了很多全局变量，我自己也想在创建新项目的一开始就先定义一些全局变量。 但是由于使用的若依框架是vue2的，新项目是vue3，所以从网上查阅了别人的一些经验，在使用中不知道为什么总是报错，真的很郁闷。看了很多人的代码，大家的都长得差不多，为什么我的总是报错呢？

因为我没有搞清楚vue应用中组件的加载过程，添加子组件的顺序错误。

首先我们来看一下vue3自动生成的main.js代码如下：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App).use(store).use(router).mount('#app')

我们来解读一下最后一行，vue中组件代码的加载顺序：

1.createApp(App)调用第一行引入的createApp方法添加根组件App（第二行引入）创建应用

2.createApp(App).use(store).use(router)调用app.use()安装两个插件store，router

3.createApp(App).mount('#app')将应用实例挂载在一个容器元素中

记住，我们一定要创建了应用之后才能使用 globalProperties 将全局变量附加到 Vue 实例上

最后修改后的挂载全局变量代码如下：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

const globalVar = 'Global variable~';

var app = createApp(App)
app.provide('globalVar', globalVar); 

app.config.globalProperties.$globalVar = globalVar;

app.use(store).use(router).mount('#app')

最后就可以成功调用啦：

<template>
  <div class="header">
    <h1>{{ $globalVar }}</h1>
  </div>
</template>

这篇笔记的代码部分来源于 在vue3中 定义全局变量 - 掘金 (juejin.cn)感兴趣的可以看看。