在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项目中我们需要使用许多的变量来维护数据的流向和状态,这些变量可以是本地变量、组件变量、父子组件变量等,但这些变量都是有局限性的。在一些场景中,可能需要在多个组件中共享某个变量,此时全局变量就派上了用场。 定义全局…...
.net 写了一个支持重试、熔断和超时策略的 HttpClient 实例池
public class HttpClientPool : IDisposable {private readonly ConcurrentQueue<HttpClient> _httpClientPool; // HttpClient 对象池private readonly SemaphoreSlim _semaphore; // 控制同时访问 HttpClient 对象池的线程数private readonly TimeSpan _timeout; // 获…...
大促期间如何监测竞品数据
无论在什么时候,竞品的数据都是品牌非常关注的,大促当然也不例外,所以准确监测到竞品数据应该如何分析也很关键,通过分析竞品,品牌可以获取非常多有价值的内容,如竞品王牌产品的分析、行业分析报告等。 力维…...
Linux yum 没有可用软件包 fping。 错误:无须任何处理 的解决办法
yum install fping -y 报错解决: [rootcpcs-node-d4n591 ~]# yum install fping -y 已加载插件:fastestmirror Determining fastest mirrors* base: mirrors.aliyun.com* extras: mirrors.aliyun.com* updates: mirrors.aliyun.com base …...
人工智能与脑机接口:开启人机融合的新时代
人工智能与脑机接口:开启人机融合的新时代 随着人工智能(AI)技术的飞速发展,我们正与一个全新的时代相遇——人工智能与脑机接口相融合的时代。这个时代将带来前所未有的变革,让人类与机器的交互方式发生根本性的改变。…...
【多线程面试题二十二】、 说说你对读写锁的了解
文章底部有个人公众号:热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享? 踩过的坑没必要让别人在再踩,自己复盘也能加深记忆。利己利人、所谓双赢。 面试官:说说你对读写锁的了解 …...
Panda3d 相机控制
Panda3d 相机控制 文章目录 Panda3d 相机控制Panda3d中的透视镜头和垂直镜头透视镜头垂直镜头 Panda3d 中用代码控制相机的移动用键盘控制相机的移动用鼠标控制相机的移动 Panda3d 把相机也当做是一个 PandaNode,因此可以向操作其他节点对其进行操作。 真正的相机是…...
Linux(CentOS)安装MySQL教程
主要参考链接 教程 1. 准备工作 1.1 安装CentOS虚拟机 教程点击 1.2 将CentOS虚拟机设置为静态IP,否则你每次重启虚拟机后连接数据库都要重新查IP 教程点击 1.3 如果有安装过MySQL,请先卸载MySQL 教程点击 1.4 虚拟机执行命令su切换到root账号(输…...
使用 OpenSSL 工具撰写 Bash 脚本进行密码明文的加密与解密
使用 OpenSSL 工具进行密码明文的加密与解密 Written By: Xinyao Tian 简介 本文档描述了使用 OpenSSL 工具在 Bash 脚本中对密码进行加密和解密的简单方式。 BASE64 的加密与解密脚本 使用 Base64 算法进行密码的加密 脚本名称为 encryptPasswd.sh, 脚本内容如下: #!/b…...
uniapp之actionsheet 自定义组件
uniapp本身自带的actionsheet太丑,不够美观。闲着也是闲着,自己实现了一个类似的选择器。 支持功能: 1、左对齐 2、右对齐 3、居中 4、可加图标 下面贴出使用教程: <template><view><action-sheet alignment&…...
在nodejs中使用Mongoose和MongoDB实现curd操作
在nodejs中使用Mongoose和MongoDB实现curd操作 在Node.js中,数据库被用来存储和检索Web应用程序的数据。它们是构建动态和可伸缩应用程序的重要组成部分。Node.js提供了各种模块和包,可以与数据库一起工作,如MySQL、PostgreSQL、MongoDB等。它们允许开发人员使用各…...
10.28 校招 实习 内推 面经
绿*泡*泡: neituijunsir 交流裙 ,内推/实习/校招汇总表格 1、校招|理想汽车2024校园招聘算法类岗位特辑(内推) 校招|理想汽车2024校园招聘算法类岗位特辑(内推) 2、校招 | 国网信…...
Azure 机器学习 - 使用无代码 AutoML 训练分类模型
了解如何在 Azure 机器学习工作室中使用 Azure 机器学习自动化 ML,通过无代码 AutoML 来训练分类模型。 此分类模型预测某个金融机构的客户是否会认购定期存款产品。 关注TechLead,分享AI全维度知识。作者拥有10年互联网服务架构、AI产品研发经验、团队管…...
【调试技术】用户态查看PEB和TEB
概述:用户态查看进程 PEB 和 TEB(通过windbg附加或启动调试的exe) 0x01 用户态查看 TEB 和 PEB 在双机调试的时候,可以直接使用 !PEB PID 和 !TEB TID 获取进程和线程的相关信息,在用户态这两个命令就会失效。原因就是用户态不支持大写的 !T…...
如何搭建一个Spring MVC和Vue3的应用程序
要搭建一个基于Spring MVC框架和Vue3框架的前端应用程序,可以按照以下步骤进行: 创建Java项目并添加Spring MVC依赖 使用Maven或Gradle等构建工具创建一个Java项目,并在项目的pom.xml或build.gradle文件中添加Spring MVC依赖。例如…...
CSS3设计动画样式
CSS3动画包括过渡动画和关键帧动画,它们主要通过改变CSS属性值来模拟实现。我将详细介绍Transform、Transitions和Animations 3大功能模块,其中Transform实现对网页对象的变形操作,Transitions实现CSS属性过渡变化,Animations实现…...
AtCoder abc 144
D - Water Bottle x先除以a,得到面积。体积和面积是等同考虑的。 分两种情况,一种是水比一半面积少,一种是水比一半面积多。 # -*- coding: utf-8 -*- # time : 2023/6/2 13:30 # author : yhdutongwoo.cn # desc : # file : …...
【开题报告】基于SpringBoot的医美在线预约系统的设计与实现
1.研究背景 医美行业是指结合医学和美容技术,为人们提供外貌改善和整容手术等服务的领域。随着社会经济的发展和人们审美观念的变化,医美行业得到了快速的发展,并受到越来越多人的关注和需求。 传统的医美预约方式主要依赖于电话预约或现场…...
AutoGen agent使用;调用本地LLM
参考: https://microsoft.github.io/autogen 安装: pip install pyautogen 代码 本地LLM部署可以用fastchat、vllm等框架部署openai接口: 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…...
OpenLayers 可视化之热力图
注:当前使用的是 ol 5.3.0 版本,天地图使用的key请到天地图官网申请,并替换为自己的key 热力图(Heatmap)又叫热点图,是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...
多模态2025:技术路线“神仙打架”,视频生成冲上云霄
文|魏琳华 编|王一粟 一场大会,聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中,汇集了学界、创业公司和大厂等三方的热门选手,关于多模态的集中讨论达到了前所未有的热度。其中,…...
论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)
HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...
安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件
在选煤厂、化工厂、钢铁厂等过程生产型企业,其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进,需提前预防假检、错检、漏检,推动智慧生产运维系统数据的流动和现场赋能应用。同时,…...
WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成
厌倦手动写WordPress文章?AI自动生成,效率提升10倍! 支持多语言、自动配图、定时发布,让内容创作更轻松! AI内容生成 → 不想每天写文章?AI一键生成高质量内容!多语言支持 → 跨境电商必备&am…...
Axios请求超时重发机制
Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式: 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...
Reasoning over Uncertain Text by Generative Large Language Models
https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...
算法岗面试经验分享-大模型篇
文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer (1)资源 论文&a…...
前端高频面试题2:浏览器/计算机网络
本专栏相关链接 前端高频面试题1:HTML/CSS 前端高频面试题2:浏览器/计算机网络 前端高频面试题3:JavaScript 1.什么是强缓存、协商缓存? 强缓存: 当浏览器请求资源时,首先检查本地缓存是否命中。如果命…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现指南针功能
指南针功能是许多位置服务应用的基础功能之一。下面我将详细介绍如何在HarmonyOS 5中使用DevEco Studio实现指南针功能。 1. 开发环境准备 确保已安装DevEco Studio 3.1或更高版本确保项目使用的是HarmonyOS 5.0 SDK在项目的module.json5中配置必要的权限 2. 权限配置 在mo…...
