vue3中如何实现定义全局变量

目录
  • vue3定义全局变量
  • vue3全局变量app.config.globalProperties的使用
    • globalProperties

vue3定义全局变量

在vue2中，我们知道vue2.x是使用Vue.prototype.$xxxx=xxx来定义全局变量，然后通过this.$xxx来获取全局变量。

但是在vue3中，这种方法显然不行了。因为vue3中在setup里面我们是无法获取到this的，因此按照官方文档我们使用下面方法来定义全局变量：

首先在main.js里写一个我们要定义的全局变量，比如一个系统id吧

app.config.globalProperties.$systemId = "10"

现在在页面里需要使用这个变量，只需要从vue中引入getCurrentInstance即可，注意不能在页面中使用this.

import { getCurrentInstance } from "vue";
const systemId = getCurrentInstance()?.appContext.config.globalProperties.$systemId
console.log(systemId);//控制台可以看到输出了10

vue3全局变量app.config.globalProperties的使用

globalProperties

  • 类型：[key: string]: any
  • 默认：undefined
  • 用法

添加一个可以在应用的任何组件实例中访问的全局 property。组件的 property 在命名冲突具有优先权。

这可以代替 Vue 2.x Vue.prototype 扩展：

// 之前(Vue 2.x)
Vue.prototype.$http = () => {}
 
// 之后(Vue 3.x)
const app = Vue.createApp({})
app.config.globalProperties.$http = () => {}

当我们想在组件内调用http时需要使用getCurrentInstance()来获取。

import { getCurrentInstance, onMounted } from "vue";
export default {
  setup( ) {
    const { ctx } = getCurrentInstance(); //获取上下文实例，ctx=vue2的this
    onMounted(() => {
      console.log(ctx, "ctx");
      ctx.http();
    });
  },
};

getCurrentInstance代表上下文，即当前实例。ctx相当于Vue2的this, 但是需要特别注意的是ctx代替this只适用于开发阶段，如果将项目打包放到生产服务器上运行，就会出错，ctx无法获取路由和全局挂载对象的。此问题的解决方案就是使用proxy替代ctx，代码参考如下。

import { getCurrentInstance } from 'vue'
export default ({
  name: '',
  setup(){
    const { proxy } = getCurrentInstance() // 使用proxy代替ctx，因为ctx只在开发环境有效
    onMounted(() => {
      console.log(proxy, "proxy");
      proxy.http();
    });
  }
})

注意：尤大在vue3推荐使用依赖注入：provide和inject。原因：vue/rfcs.

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 在vue项目中 实现定义全局变量 全局函数操作

    写在前面: 如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数,这两个设置不太难,而且有一些共通之处,可能有一些朋友对此不太了解,所以随便写出来分享一波. 定义全局变量 原理: 设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用export default 暴露出去,在main.js里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时,引入该模块

  • vue中配置scss全局变量的步骤

    vue中配置scss全局变量的步骤

    在写项目的过程中,如果用的是scss来编写样式代码,常常需要定义各种变量,例如主题色.主字号之类的,因此我们会把这些变量写到一个单独的_variable.scss文件内,但是每次都要在vue单文件内引入这些变量未免太繁琐了,所以有没有办法可以默认把变量文件作为全局文件进行引入呢?答案是肯定的,可以用下面的方法进行配置,可以根据当前使用的框架和环境来进行方法的选择. 一.使用vue-cli(即vue-cli2)脚手架时 1. 首先,需要安装一个loader,sass-resources-loade

  • Vue中全局变量的定义和使用

    1.工作中遇到的两类问题 -------------------------------------------------------------------------------- 1.1 状态值(标志) A界面赋值的a变量,作为记录状态值(标志)需要被其他几个界面使用.其他几个界面亦可以改变a状态值. 1.2 传递字段 A界面有a字段,B界面没有a字段,但需要调用a字段. 2.解决方法 ---------------------------------------------------

  • 在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作

    你可以在创建项目的时候选择预处理器 (Sass/Less/Stylus).如果当时没有选好,内置的 webpack 仍然会被预配置为可以完成所有的处理.你也可以手动安装相应的 webpack loader: # Sass npm install -D sass-loader node-sass # Less npm install -D less-loader less # Stylus npm install -D stylus-loader stylus 然后你就可以导入相应的文件类型,或在

  • 在vue-cli 3中给stylus、sass样式传入共享的全局变量

    在vue-cli 3中, 给stylus.sass样式传入共享的全局变量 在开发中有时,我们定义了大量的基础样式变量,例如: 大量的vue单文件组件会用到这些变量,每个组件都引人一次又太麻烦.全局引入是个不错的方法,于是,在main.js 中引入variable.styl文件,但是你会发现,并不起作用. 在查阅了vue cli官方文档后发现,有官方支持的方法. 1.给sass样式传入共享的全局变量 有的时候你想要向 webpack 的预处理器 loader 传递选项.你可以使用 vue.conf

  • vue项目中定义全局变量、函数的几种方法

    前言 在项目中,经常会复用一些变量和函数,比如用户的登录token,用户信息等.这时将它们设为全局的就显得很重要了,全局变量和全局函数之间有一些相通之处,它们其实很简单,但是有些人可能还不太了解.简单总结分享一波,希望对你有所帮助. 定义全局变量 原理:使用模块(.js或.vue文件)来管理全局变量,最后使用export暴露出去 (最好导出的格式为对象,方便在其他地方调用),当其它地方需要使用时,用import导入该模块 1.使用全局变量专用模块,挂载到main.js文件上面 全局变量模块Glo

  • vue使用混入定义全局变量、函数、筛选器的实例代码

    说一种没人发的,利用混入mixins来实现全局变量和函数.mixins里面的方法.变量.筛选器会和组件里面的方法.变量.筛选器合并.这种方法优点是ide会有方法.变量.筛选器提示. 一.main.js文件 import Vue from 'vue' import App from './App' import router from './router' import store from './store' import mixin from './utils/mixin' Vue.proto

  • vue3中如何实现定义全局变量

    目录 vue3定义全局变量 vue3全局变量app.config.globalProperties的使用 globalProperties vue3定义全局变量 在vue2中,我们知道vue2.x是使用Vue.prototype.$xxxx=xxx来定义全局变量,然后通过this.$xxx来获取全局变量. 但是在vue3中,这种方法显然不行了.因为vue3中在setup里面我们是无法获取到this的,因此按照官方文档我们使用下面方法来定义全局变量: 首先在main.js里写一个我们要定义的全局变

  • 如何在Vue3中实现自定义指令(超详细!)

    如何在Vue3中实现自定义指令(超详细!)

    目录 前言 生命周期 钩子的参数 简化形式 对象字面量 在组件上使用指令 几个实用的自定义指令 自动聚焦v-focus 防抖v-debounce 节流v-throttle 弹窗隐藏v-hide 总结 在开发Vue项目时,大多数人都会使用到Vue内置的一些指令,例如v-model.v-if等,在使用的时候不知道有没有想过自己也来实现一个指令呢.本文就以Vue3项目为基础,从原理.方法到实际案例.注意事项,尽可能细致的讲解如何自定义指令. 前言 我们需要明白为什么需要自定义一个指令,其实就是想更加简

  • 使用vue3+ts+setup获取全局变量getCurrentInstance的方法实例

    使用vue3+ts+setup获取全局变量getCurrentInstance的方法实例

    目录 前言: vue3官方提供的方法 1.引入方法 2.定义变量,接到我们的方法 3.main.js中定义我们的全局变量 4.页面中使用我们的全局变量 vue3+ts 使用官方方法遇到的问题: 最终我解决问题的方法: 补充:Vue3 getCurrentInstance与ts结合使用的问题 总结 前言: vue3的 setup中是获取不到this的,为此官方提供了特殊的方法,让我们可以使用this,达到我们获取全局变量的目的,但是在使用typescript的时候,就会有一些新的问题产生,这里来做

  • vue3中vue.config.js配置及注释详解

    vue3中vue.config.js配置及注释详解

    目录 报错 打包时提示文件过大,配置解决方案,如下 总结 报错 asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).This can impact web performance.entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit

  • PHP中的超全局变量

    PHP中的超全局变量 从PHP 4.2.0 开始,register_globals 的默认值为 off,这样一来,以前的很多可以直接使用的变量,如 $PHP_SELF 或者你设定的SESSION变量都不能用 "$变量名"的形式访问了,这可能会给你带来很多不变,但却有助于安全性的提高.访问这些变量,你需要使用PHP 超全局变量,如下: $_SERVER 变量由 Web 服务器设定或者直接与当前脚本的执行环境相关联.类似于旧数组 $HTTP_SERVER_VARS 数组.以前的$PHP_S

  • 深入探讨C语言中局部变量与全局变量在内存中的存放位置

    C语言中局部变量和全局变量变量的存储类别(static,extern,auto,register) 1.局部变量和全局变量在讨论函数的形参变量时曾经提到,形参变量只在被调用期间才分配内存单元,调用结束立即释放.这一点表明形参变量只有在函数内才是有效的,离开该函数就不能再使用了.这种变量有效性的范围称变量的作用域.不仅对于形参变量,C语言中所有的量都有自己的作用域.变量说明的方式不同,其作用域也不同.C语言中的变量,按作用域范围可分为两种,即局部变量和全局变量.1.1局部变量局部变量也称为内部变量

  • Android编程中context及全局变量实例详解

    本文实例讲述了Android编程中context及全局变量的用法.分享给大家供大家参考,具体如下: 今天在研究context的时候,对application和activity context有了一定的了解,下面是从网上复制过来的资料 Application context和Activity context的区别: 这是两种不同的context,也是最常见的两种.第一种中context的生命周期与Application的生命周期相关的,context随着Application的销毁而销毁,伴随ap

  • javascript中局部变量和全局变量的区别详解

    javascript有两种变量:局部变量和全局变量.当然,我们这篇文章是帮助大家真正的区别这两种变量. 首先,局部变量是指只能在本变量声明的函数内部调用.全局变量时整个代码中都可以调用的变量.当然,单单从字面上理解肯定是不清楚的,下面我详细的介绍下: 大家都知道,变量是需要用var关键字声明的.但是javascript中也可以隐式的使用变量,就是不用声明,直接使用.而且,千万注意,javascript把隐式声明的变量总是当成全局变量来使用的. 例如: 复制代码 代码如下: function my

  • Vue3 中的数据侦测的实现

    Vue3 中的数据侦测的实现

    在10月05日凌晨Vue3的源代码正式发布了,来自官方的消息: 目前的版本是 Pre-Alpha , 仓库地址:Vue-next,可以通过Composition API了解更多新版本的信息,目前版本单元测试相关情况vue-next-coverage. 文章大纲: Vue 的核心之一就是响应式系统,通过侦测数据的变化,来驱动更新视图. 实现可响应对象的方式 通过可响应对象,实现对数据的侦测,从而告知外界数据变化.实现可响应对象的方式: getter 和 setter defineProperty

随机推荐