vue3如何將 app 全域性變數物件變為響應式並監聽到某個屬性的改變

蓓蕾心晴發表於2024-10-08
VueAPP變數物件

需求：

透過 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: config } = internalInstance.appContext.config.globalProperties
// 監聽螢幕方向的改變，改變後再呼叫初始化樣式的方法
watch(() => $config.orientation, init, { immediate: true })

相關文章