vue3如何将 app 全局变量对象变为响应式并监听到某个属性的改变
需求:
通过 getData() 方法获取到数据对象,想要在屏幕方向改变的时候,给获取到的对象设置 orientation,能实时修改
方案:
使用 reactive 包裹, template 直接使用全局变量下的属性,watch 直接监听对应属性
代码如下:
main.js
const config = reactive(getData()) // 设置屏幕方向 const setOrientation = () => { config.orientation = getOrientation() window.config.orientation = getOrientation() } setOrientation() document.addEventListener('DOMContentLoaded', setOrientation) // 绑定屏幕旋转事件 window.addEventListener('resize', setOrientation) window.mraid.addEventListener('sizeChange', setOrientation) // 避免锁定屏幕方向的情况下横屏进入,获取方向不对 setTimeout(setOrientation, 1000) app.config.globalProperties.$config = config app.provide('config', readonly(config))
*.vue 模板中直接使用
<Logo v-if="$config.orientation === 'portrait'"/>
监听config 某个属性
const config = inject('config') // 监听屏幕方向的改变,改变后再调用初始化样式的方法 watch(() => config.orientation, init, { immediate: true })
或
const internalInstance = getCurrentInstance()
const { $config } = internalInstance.appContext.config.globalProperties
// 监听屏幕方向的改变,改变后再调用初始化样式的方法 watch(() => $config.orientation, init, { immediate: true })
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
2022-10-08 excel 多列内容拼接