vue3 中全局变量的设置

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第28天，点击查看活动详情

在 Vue 中，设置全局变量的方法不止一种。vue 2 中常用的就是 Vue.prototype.$msg = " 好好学习 天天向上 " 这种形式了，在页面中 使用 this.$msg 来获取全局变量的值。

但是在 vue 3 中，我们无法使用这种方式来定义全局变量了，

app.config.globalProperties

定义全局变量：

app.config.globalProperties.$msg = " 好好学习 天天向上 "

页面使用：

import { getCurrentInstance } from "vue";
const info = getCurrentInstance()?.appContext.config.globalProperties.$msg
console.log(info);

依赖注入 provide / inject

依赖注入往往在组件之间参数传递的时候使用，使用 provide /inject 可以穿透多层组件，实现父组件到子组件的数据的传递。

如果我们将全局变量放在根组件的 provide 中，其它组件都属于根组件的子组件，这样所有的组件都可以访问此变量，这个变量可以认为是一个全局变量。

vuex

安装：

npm install vuex

在项目目录下的 /store 文件夹中建立存储文件 myStore.js，包含一个全局变量的定义以及一个修改变量值的方法，具体内容如下：

import { createStore } from 'vuex'

const store = createStore({
    state () {
        return {
            msg:"好好学习 天天向上",
        }
    },
    mutations: {
        changeMsg(state,info) {
            state.msg = msg;
        }
    }
})

export default store;

使用全局变量：

import {myStore} from '@/store/myStore'

console.log(myStore.msg)

修改全局变量的值：

myStore.changeMsg("good good study, day day up")

注：刷新浏览器后，存储在 vuex 中的值不会被存储，所以在选择存储变量的方法的时候要注意这一点，避免数据丢失。比如登陆后存储获取到的 token，一般会使用 localstorage 等方式来存储，不清理浏览器缓存数据便不会丢失，而不是 vuex。

localstorage

• 使用本地缓存可以长久的保存变量信息，但是存储的大小有限
• 默认存储的数据类型是 string 类型，如果存储的是 JSON 结构需要进行转换
• 浏览器私模式无法读取存储的值

localStorage.setItem("token","...");

let data = localStorage.getItem("token");

localStorage.removeItem("token")  //  删除