当前位置: 首页 > news >正文

在Vue项目中定义全局变量

在Vue项目中我们需要使用许多的变量来维护数据的流向和状态,这些变量可以是本地变量、组件变量、父子组件变量等,但这些变量都是有局限性的。在一些场景中,可能需要在多个组件中共享某个变量,此时全局变量就派上了用场。

定义全局变量的方法
1、使用Vue.prototype定义全局变量

通过在 vue 的原型上定义属性,可以在所有组件中访问该属性。

  • 在main.js定义全局变量
// main.js
Vue.prototype.baseUrl = "https://www.example.com/api";
  • 在页面中使用
<template><div>{{baseUrl}}</div>
</template>
  • 在方法中使用
<script>
created() {console.log(this.baseUrl)
},
</script>
2、使用env文件定义全局变量

在Vue项目的根目录中创建一个.env文件,用于存储一些全局变量。

  • 在.env文件中定义
VUE_APP_BASE_URL = "https://www.example.com/api";
  • 在方法中使用
<script>
created() {const baseUrl = process.env.VUE_APP_BASE_URLconsole.log(baseUrl)
},
</script>
3、使用vuex定义全局变量

vuex 是 vue 的官方状态管理库,可以用于管理全局状态。

  • 定义全局变量
//store/index.js
export default new Vuex.Store({state: {baseUrl: "https://www.example.com/api";},
})
  • 在页面中使用
<template><div>{{this.$store.state.baseUrl}}</div>
</template>
  • 在方法中使用
<script>
created() {const baseUrl = this.$store.state.baseUrlconsole.log(baseUrl)
},
</script>
4、使用Vue.mixin定义全局变量

通过混入(mixin)的方式,可以将一些公共的属性或方法混入到所有组件中。

  • 创建一个全局变量的js文件。示例文件路径为:./utils/globalVar.js
//globalVar.js
export default {data() {return {baseUrl: "https://www.example.com/api";};}
}
  • 在项目的 main.js 文件中引入该 globalVar.js 文件并使用 Vue.mixin() 方法将之全局混入:
//main.js
import globalVar from './utils/globalVar.js'
Vue.mixin(globalVar)
  • 在页面中使用
<template><div>{{baseUrl}}</div>
</template>
  • 在方法中使用
<script>
created() {console.log(this.baseUrl)
},
</script>
5、使用localStorage 或 sessionStorage定义全局变量

通过将变量存储在 localStorage 或 sessionStorage 中,可以在所有组件中共享该变量。

  • 在main.js中定义
localStorage.setItem("baseUrl", "https://www.example.com/api");
  • 在方法中使用
<script>
created() {const baseUrl = localStorage.getItem("baseUrl")console.log(baseUrl)
},
</script>
6、vue3中配置globalProperties

vue3提供了专门公共数据配置的方式: globalProperties、getCurrentInstance

  • 在main.js中定义
//main.js
import { createApp } from 'vue'
import App from './App.vue'
const app=createApp(App)
app.config.globalProperties.baseUrl = "https://www.example.com/api";
app.mount('#app')
  • 在页面中使用
<template><div>{{baseUrl}}</div>
</template>
  • 在方法中使用
<script setup>
const { proxy } = getCurrentInstance();
console.log(proxy.baseUrl)
</script>
7、自动配置打包版本日期

在前端开发过程中,总会遇到前端包部署之后,不知道是否成功,是否替换了原来的包,看不出来事什么时候的包。我们可以在控制台输出一个打包的日期。这样就很容易区分前端包的版本日期了。

7.1、vue3在vite.config.js中定义环境变量。获取当前打包日期时间。
  • 在vite.config.js配置
//vite.config.js
process.env.VITE_APP_VERSION = JSON.stringify(new Date().toLocaleString())
  • 在App.vue中打印
<script setup>console.log(import.meta.env.VITE_APP_VERSION)
</script>
7.2、vue2在vue.config.js中定义环境变量。获取当前打包日期时间。
  • 在vue.config.js配置
//vue.config.js
const webpack = require('webpack');
module.exports = {configureWebpack: {plugins: [new webpack.DefinePlugin({"process.env.VERSION": JSON.stringify(new Date().toLocaleString())})]}
}
  • 在App.vue中打印
<script>
created() {console.log(process.env.VERSION)
},
</script>

相关文章:

在Vue项目中定义全局变量

在Vue项目中我们需要使用许多的变量来维护数据的流向和状态&#xff0c;这些变量可以是本地变量、组件变量、父子组件变量等&#xff0c;但这些变量都是有局限性的。在一些场景中&#xff0c;可能需要在多个组件中共享某个变量&#xff0c;此时全局变量就派上了用场。 定义全局…...

.net 写了一个支持重试、熔断和超时策略的 HttpClient 实例池

public class HttpClientPool : IDisposable {private readonly ConcurrentQueue<HttpClient> _httpClientPool; // HttpClient 对象池private readonly SemaphoreSlim _semaphore; // 控制同时访问 HttpClient 对象池的线程数private readonly TimeSpan _timeout; // 获…...

大促期间如何监测竞品数据

无论在什么时候&#xff0c;竞品的数据都是品牌非常关注的&#xff0c;大促当然也不例外&#xff0c;所以准确监测到竞品数据应该如何分析也很关键&#xff0c;通过分析竞品&#xff0c;品牌可以获取非常多有价值的内容&#xff0c;如竞品王牌产品的分析、行业分析报告等。 力维…...

Linux yum 没有可用软件包 fping。 错误:无须任何处理 的解决办法

yum install fping -y 报错解决&#xff1a; [rootcpcs-node-d4n591 ~]# yum install fping -y 已加载插件&#xff1a;fastestmirror Determining fastest mirrors* base: mirrors.aliyun.com* extras: mirrors.aliyun.com* updates: mirrors.aliyun.com base …...

人工智能与脑机接口:开启人机融合的新时代

人工智能与脑机接口&#xff1a;开启人机融合的新时代 随着人工智能&#xff08;AI&#xff09;技术的飞速发展&#xff0c;我们正与一个全新的时代相遇——人工智能与脑机接口相融合的时代。这个时代将带来前所未有的变革&#xff0c;让人类与机器的交互方式发生根本性的改变。…...

【多线程面试题二十二】、 说说你对读写锁的了解

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 面试官&#xff1a;说说你对读写锁的了解 …...

Panda3d 相机控制

Panda3d 相机控制 文章目录 Panda3d 相机控制Panda3d中的透视镜头和垂直镜头透视镜头垂直镜头 Panda3d 中用代码控制相机的移动用键盘控制相机的移动用鼠标控制相机的移动 Panda3d 把相机也当做是一个 PandaNode&#xff0c;因此可以向操作其他节点对其进行操作。 真正的相机是…...

Linux(CentOS)安装MySQL教程

主要参考链接 教程 1. 准备工作 1.1 安装CentOS虚拟机 教程点击 1.2 将CentOS虚拟机设置为静态IP&#xff0c;否则你每次重启虚拟机后连接数据库都要重新查IP 教程点击 1.3 如果有安装过MySQL&#xff0c;请先卸载MySQL 教程点击 1.4 虚拟机执行命令su切换到root账号(输…...

使用 OpenSSL 工具撰写 Bash 脚本进行密码明文的加密与解密

使用 OpenSSL 工具进行密码明文的加密与解密 Written By: Xinyao Tian 简介 本文档描述了使用 OpenSSL 工具在 Bash 脚本中对密码进行加密和解密的简单方式。 BASE64 的加密与解密脚本 使用 Base64 算法进行密码的加密 脚本名称为 encryptPasswd.sh, 脚本内容如下: #!/b…...

uniapp之actionsheet 自定义组件

uniapp本身自带的actionsheet太丑&#xff0c;不够美观。闲着也是闲着&#xff0c;自己实现了一个类似的选择器。 支持功能&#xff1a; 1、左对齐 2、右对齐 3、居中 4、可加图标 下面贴出使用教程&#xff1a; <template><view><action-sheet alignment&…...

在nodejs中使用Mongoose和MongoDB实现curd操作

在nodejs中使用Mongoose和MongoDB实现curd操作 在Node.js中&#xff0c;数据库被用来存储和检索Web应用程序的数据。它们是构建动态和可伸缩应用程序的重要组成部分。Node.js提供了各种模块和包,可以与数据库一起工作,如MySQL、PostgreSQL、MongoDB等。它们允许开发人员使用各…...

10.28 校招 实习 内推 面经

绿*泡*泡&#xff1a; neituijunsir 交流裙 &#xff0c;内推/实习/校招汇总表格 1、校招&#xff5c;理想汽车2024校园招聘算法类岗位特辑&#xff08;内推&#xff09; 校招&#xff5c;理想汽车2024校园招聘算法类岗位特辑&#xff08;内推&#xff09; 2、校招 | 国网信…...

Azure 机器学习 - 使用无代码 AutoML 训练分类模型

了解如何在 Azure 机器学习工作室中使用 Azure 机器学习自动化 ML&#xff0c;通过无代码 AutoML 来训练分类模型。 此分类模型预测某个金融机构的客户是否会认购定期存款产品。 关注TechLead&#xff0c;分享AI全维度知识。作者拥有10年互联网服务架构、AI产品研发经验、团队管…...

【调试技术】用户态查看PEB和TEB

概述&#xff1a;用户态查看进程 PEB 和 TEB(通过windbg附加或启动调试的exe) 0x01 用户态查看 TEB 和 PEB 在双机调试的时候&#xff0c;可以直接使用 !PEB PID 和 !TEB TID 获取进程和线程的相关信息&#xff0c;在用户态这两个命令就会失效。原因就是用户态不支持大写的 !T…...

如何搭建一个Spring MVC和Vue3的应用程序

要搭建一个基于Spring MVC框架和Vue3框架的前端应用程序&#xff0c;可以按照以下步骤进行&#xff1a; 创建Java项目并添加Spring MVC依赖 使用Maven或Gradle等构建工具创建一个Java项目&#xff0c;并在项目的pom.xml或build.gradle文件中添加Spring MVC依赖。例如&#xf…...

CSS3设计动画样式

CSS3动画包括过渡动画和关键帧动画&#xff0c;它们主要通过改变CSS属性值来模拟实现。我将详细介绍Transform、Transitions和Animations 3大功能模块&#xff0c;其中Transform实现对网页对象的变形操作&#xff0c;Transitions实现CSS属性过渡变化&#xff0c;Animations实现…...

AtCoder abc 144

D - Water Bottle x先除以a&#xff0c;得到面积。体积和面积是等同考虑的。 分两种情况&#xff0c;一种是水比一半面积少&#xff0c;一种是水比一半面积多。 # -*- coding: utf-8 -*- # time : 2023/6/2 13:30 # author : yhdutongwoo.cn # desc : # file : …...

【开题报告】基于SpringBoot的医美在线预约系统的设计与实现

1.研究背景 医美行业是指结合医学和美容技术&#xff0c;为人们提供外貌改善和整容手术等服务的领域。随着社会经济的发展和人们审美观念的变化&#xff0c;医美行业得到了快速的发展&#xff0c;并受到越来越多人的关注和需求。 传统的医美预约方式主要依赖于电话预约或现场…...

AutoGen agent使用;调用本地LLM

参考&#xff1a; https://microsoft.github.io/autogen 安装&#xff1a; pip install pyautogen 代码 本地LLM部署可以用fastchat、vllm等框架部署openai接口&#xff1a; from autogen import AssistantAgent, UserProxyAgent, oai ## 调用本地模型对外的openai接口 conf…...

Docker安装matomo

Docker安装matomo 文章目录 Docker安装matomo1.安装Docker2.matomo安装 1.安装Docker curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun2.matomo安装 #拉取matomo镜像 docker pull matomo#启动matomo容器 docker run -d --name matomo -p 8093:80 -v /do…...

【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

MVC 数据库

MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...

Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

云原生玩法三问:构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

java高级——高阶函数、如何定义一个函数式接口类似stream流的filter

java高级——高阶函数、stream流 前情提要文章介绍一、函数伊始1.1 合格的函数1.2 有形的函数2. 函数对象2.1 函数对象——行为参数化2.2 函数对象——延迟执行 二、 函数编程语法1. 函数对象表现形式1.1 Lambda表达式1.2 方法引用&#xff08;Math::max&#xff09; 2 函数接口…...

归并排序:分治思想的高效排序

目录 基本原理 流程图解 实现方法 递归实现 非递归实现 演示过程 时间复杂度 基本原理 归并排序(Merge Sort)是一种基于分治思想的排序算法&#xff0c;由约翰冯诺伊曼在1945年提出。其核心思想包括&#xff1a; 分割(Divide)&#xff1a;将待排序数组递归地分成两个子…...

qt+vs Generated File下的moc_和ui_文件丢失导致 error LNK2001

qt 5.9.7 vs2013 qt add-in 2.3.2 起因是添加一个新的控件类&#xff0c;直接把源文件拖进VS的项目里&#xff0c;然后VS卡住十秒&#xff0c;然后编译就报一堆 error LNK2001 一看项目的Generated Files下的moc_和ui_文件丢失了一部分&#xff0c;导致编译的时候找不到了。因…...

【字节拥抱开源】字节团队开源视频模型 ContentV: 有限算力下的视频生成模型高效训练

本项目提出了ContentV框架&#xff0c;通过三项关键创新高效加速基于DiT的视频生成模型训练&#xff1a; 极简架构设计&#xff0c;最大化复用预训练图像生成模型进行视频合成系统化的多阶段训练策略&#xff0c;利用流匹配技术提升效率经济高效的人类反馈强化学习框架&#x…...