根據計算屬性內的測試傳遞props

Question

我在Nuxt 3的computed()屬性中遇到了一個簡單測試的問題。

const test = computed(() => {
  if (process.client) {
    console.log('工作了。是行動裝置嗎？', window.innerWidth < 768)
    return window.innerWidth < 768
  } else {
    console.log('沒有工作')
    return
  }
})

計算屬性的結果總是正確的，但是我想在下面的模板中使用它來有條件地傳遞props。

<Loader
 v-if="isLoading"
 :images="test ? brands.desktopLoaderImages : brands.mobileLoaderImages"
/>

問題是無論結果如何，brands.mobileLoaderImages總是作為props傳遞給我的元件，我無法弄清楚為什麼。

我嘗試使用不同的技術來確定螢幕大小，而不是window.innerWidth，像是@vueuse/core這樣的專用模組，但結果都一樣。我猜問題可能來自Vue的生命週期或其他什麼？

Answer 1

建議使用useBreakpoints從VueUse使用它的nuxt模組：

const breakpoints = useBreakpoints()

const test  = breakpoints.smaller('md')