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 }
}

### Vue 3 中创建和使用响应式全局变量 #### 创建 Vue 实例配置全局属性 为了使全局变量具有响应性,在创建 Vue 应用实例时,应该利用 `createApp` 函数,通过 `app.config.globalProperties` 来设置全局属性。但是需要注意的是,直接添加到这里的普通 JavaScript 属性不会自动成为响应式的[^2]。 ```javascript import { createApp } from &#39;vue&#39;; const app = createApp(App); // 不推荐这样做,因为这些属性不是响应式的 app.config.globalProperties.$nonReactiveProperty = "I&#39;m not reactive"; ``` #### 使用 `provide` 和 `inject` 进行依赖注入 另一种方是采用组合 API 提供的 `provide`/`inject` 对来传递可被后代组件访问的数据或功能。这种方非常适合用于跨多个层次结构下的子组件间共享状态[^1]。 然而,当目标是在整个应用程序范围内提供服务或者公共数据时,更常见的方还是修改应用级别的配置项。 #### 利用 `ref` 或者 `reactive` 构建响应式对象 为了让全局变量具备响应能力,应当借助 Composition API 下提供的工具函数——`ref()` 或者 `reactive()` 。前者适用于基本类型的封装;后者则适合处理复杂的数据结构如对象和数组[^4]。 下面是一个完整的例子展示怎样正确地声明以及消费这样的全局资源: ##### 定义全局响应变量 ```typescript // main.ts import { createApp, ref, reactive } from &#39;vue&#39;; import App from &#39;./App.vue&#39;; const appInstance = createApp(App); // 添加一个简单的字符串型响应式属性 appInstance.config.globalProperties.$message = ref(&#39;Hello World&#39;); // 如果需要存储更多字段,则考虑使用 reactive() appInstance.config.globalProperties.$settings = reactive({ theme: &#39;light&#39;, language: &#39;en&#39; }); export default appInstance; ``` ##### 在任何地方读取与更新它们 一旦上述操作完成之后,在任意组件内部就可以轻松获取到之前定义好的全局变量了: ```html <!-- MyComponent.vue --> <template> <div>{{ $message }}</div> <!-- 显示当前的消息 --> <button @click="changeTheme">切换主题</button> {{ $settings.theme }} </template> <script setup lang="ts"> function changeTheme() { this.$settings.theme === &#39;dark&#39; ? (this.$settings.theme = &#39;light&#39;) : (this.$settings.theme = &#39;dark&#39;); } </script> ``` 请注意这里假设你正在使用的脚手架支持 `<script setup>` 的语法糖形编写单文件组件(SFC),如果不是的话可能需要调整导入逻辑。 另外值得注意的一点是,尽管 `$message` 是由 `ref` 构造而来,但在模板里可以直接当作普通的值去渲染而无需额外解包(`.value`)。这是因为 Vue 自动帮我们做了这一步转换工作。 最后提醒一点关于性能优化方面的小技巧:对于那些只读性质的全局常量来说,没有必要将其设为响应式的,除非确实存在变更的需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值