vue3设置全局变量并获取 全局响应式变量 窗口大小

设置

js文件统一管理全局变量

方法1 app provide() 全局提供变量

通过inject()使用

方法2

app实例配置全局变量

获取 通过 getCurrentInstance.appContext.config.globalProperties.$innerWidth访问到

code

import { ref } from 'vue'
export const useGlobalState = () => {const innerWidth = ref(window.innerWidth)window.addEventListener('resize', () => {innerWidth.value = window.innerWidth})return { innerWidth }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/24296.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SD4056E 1.1A锂离子电池线性充电器芯片IC

一般描述 SD4056E是一个完整的CC/CV线性充电器单节锂离子电池。它是专门设计的USB电源规格内工作。 由于内部P-MOSFET架构,不需要外部检测电阻,也不需要阻塞二极管。在高功率运行或高环境温度下,热反馈调节充电电流以限制模具温度。充电…

ALSA 用例配置

ALSA 用例配置。参考 ALSA 用例配置 来了解更详细信息。 ALSA 用例配置 用例配置文件使用 配置文件 语法来定义静态配置树。该树在运行时根据配置树中的条件和动态变量进行评估(修改)。使用 用例接口 API 解析结果并将其导出到应用程序。 配置目录和主…

elementui Menu 二级菜单 min-width修改无效

原因:可能是生成的二级菜单样式里面没有带特定的hash属性 而vue代码里面样式里带了 scoped生成的样式有改样式选择器 从而无法成功选择 解决:让样式可以全局选择 不带属性选择器 单文件组件 CSS 功能 | Vue.js :global(.el-menu--vertical .el-menu--p…

进入某个页面时将VUE中的某个Button按钮设置为选中状态

进入某个页面时将VUE中的某个Button按钮设置为选中状态 我想达到的效果如标题所说,目的是为了表示页面展示的内容是由于该按钮被选择的结果。 解决思路是使用VUE中的mounted()钩子函数,在该函数中调用按钮得到焦点方法、按钮被点击方法。具体代码如下&am…

K8s Pod的QoS类

文章目录 OverviewPod的QoS分类Guaranteed1.如何将 Pod 设置为保证Guaranteed2. Kubernetes 调度器如何管理Guaranteed类的Pod Burstable1. 如何将 Pod 设置为Burstable2.b. Kubernetes 调度程序如何管理 Burstable Pod BestEffort1. 如何将 Pod 设置为 BestEffort2. Kubernete…

蓝桥云课第12届强者挑战赛

第一题&#xff1a;字符串加法 其实本质上就是一个高精度问题&#xff0c;可以使用同余定理的推论 &#xff08;ab&#xff09;%n((a%n)(b%n))%n; #include <iostream> using namespace std; const int mod1e97; int main() {string a,b;cin>>a>>b;ab;int …

第九篇——冗余量:《史记》和《圣经》那个信息量大?

目录 一、背景介绍二、思路&方案三、过程1.思维导图2.文章中经典的句子理解3.学习之后对于投资市场的理解4.通过这篇文章结合我知道的东西我能想到什么&#xff1f; 四、总结五、升华 一、背景介绍 通过信息量的对比&#xff0c;引出来冗余度的概念&#xff0c;又深入浅出…

【传知代码】基于曲率的图重新布线(论文复现)

前言&#xff1a;在图形处理中&#xff0c;一个至关重要的问题是图形的重新布线&#xff0c;即在不改变图形基本结构的前提下&#xff0c;通过调整节点间的连接关系&#xff0c;使图形具有更好的性质&#xff0c;如更低的复杂度、更高的可视化效果或更强的鲁棒性。传统的图形重…

VMware 三种网络模式

目录 一、网卡、路由器、交换机 二、虚拟网络编辑器 三、网络模式 1.桥接模式 通信方式 特点 配置 连通情况 使用场景 2.NAT模式 通信方式 特点 配置 连通情况 使用场景 3.仅主机 通信方式 特点 配置 连通情况 使用场景 一、网卡、路由器、交换机 网卡(Ne…

大数据处理学习笔记

sudo tar -zxvf hadoop-1.1.2.tar.gz -C / #解压到/usr/local目录下 sudo mv hadoop-1.1.2 hadoop #重命名为hadoop sudo chown -R python ./hadoop #修改文件权限 //java安装同上给hadoop配置环境变量&#xff0c;将下面代…

webman中创建udp服务

webman是workerman的web开发框架 可以很容易的开启udp服务 tcp建议使用gatewayworker webman GatewayWorker插件 创建udp服务: config/process.php中加入: return [// File update detection and automatic reloadmonitor > [ ...........], udp > [handler > p…

WWDC24即将到来,ios18放大招

苹果公司即将在下周开全球开发者大会(WWDC)&#xff0c;大会上将展示其人工智能技术整合到设备和软件中的重大进展,包括与OpenAI的历史性合作。随着大会的临近,有关iOS 18及其据称采用AI技术支持的应用程序和功能的各种泄露信息已经浮出水面。 据报道,苹果将利用其自主研发的大…

力扣303. 区域和检索 - 数组不可变

Problem: 303. 区域和检索 - 数组不可变 文章目录 题目描述思路复杂度Code 题目描述 思路 创建前缀和数组preSum&#xff0c;其中preSum[i]处元素值为nums[0] - nums[i - 1]处元素值得和&#xff0c;当调用sumRange函数时直接返回preSum[right 1] - preSum[left] 复杂度 函数…

数据结构之ArrayList与顺序表(上)

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a;数据结构&#xff08;Java版&#xff09; 顺序表的学习&#xff0c;点我 上面这篇博文是关于顺序表的基础知识&#xff0c;以及顺序表的实现。…

CorelDRAW2024最新版本有哪些功能?揭秘设计界最新神器!

“设计”一词最早来源于拉丁语“designare”&#xff0c;意为计划&#xff0c;构思。随着时代的发展&#xff0c;人们将“设计”理解为一种创造性活动&#xff0c;通过这种活动&#xff0c;人们可以创造出新的产品、新的场景以及新的体验。 「CorelDRAW汉化版下载」&#xff0c…

优化财务管理制度提升企业经营效益—以审计代理记账为例

随着社会经济的快速发展&#xff0c;企业经营规模不断扩大&#xff0c;面临的财务管理问题也日益复杂&#xff0c;而作为其中的重要一环&#xff0c;审计代理记账已经成为了企业的必要组成部分&#xff0c;本文将重点探讨审计代理记账对于优化企业财务管理&#xff0c;提高经营…

width: 100%和 width: 100vw这两种写法有什么区别

width: 100%; 和 width: 100vw; 是两种不同的 CSS 写法&#xff0c;它们在实际应用中会有不同的效果。以下是这两种写法的主要区别&#xff1a; width: 100%; 定义&#xff1a;将元素的宽度设置为其包含块&#xff08;通常是父元素&#xff09;宽度的 100%。效果&#xff1a;元…

网络实用技术答案

&#xff08; C &#xff09;不属于计算机网络四要素。A. 计算机系统 B. 传输介质C. 用户 D. 网络协议计算机网络中广域网和局域网的分类是以&#xff08; D &#xff09;来划分的。A. 信息交换方式 B&#xff0e;传输控制方法C. 网络使用习惯 D&#xff0e;网络覆盖范围计算机…

QT 信号和槽 多对一关联示例,多个信号,一个槽函数响应,多个信号源如何绑定一个槽函数

三个顾客 Anderson、Bruce、Castiel 都要订饭&#xff0c;分别对应三个按钮&#xff0c;点击一个按钮&#xff0c;就会弹出给该顾客送饭的消息。注意这个例子只使用一个槽函数&#xff0c;而三个顾客名称是不一样的&#xff0c;弹窗时显示的消息不一样&#xff0c;这需要一些 技…

navi_cat查看数据库的连接密码

Navi_Cat 建立连接&#xff0c;来访问数据库。可惜&#xff0c;忘记了数据库密码&#xff0c;没事&#xff0c;这么搞。 首先先导出链接&#xff0c;再从链接里取出被加密的密码&#xff0c;然后找个可在线运行PHP的网站&#xff08;代码在线运行 - 在线工具&#xff09;&…