Nuxt3中Pinia Store计算属性初始加载时不作用于模板

这是Nuxt SSR场景下的典型问题：布局组件的SSR渲染时机早于子页面useAsyncData的执行流程，导致SSR输出的布局DOM中没有has-banner类；客户端 hydration 阶段，尽管Pinia状态已正确恢复，但Vue可能因SSR DOM与客户端状态的初始不匹配，未能自动触发DOM更新。

方案1：手动监听状态并同步DOM类名（最直接） #

通过watch监听hasBanner的变化，在客户端手动控制DOM类名，绕过SSR hydration的匹配限制：

<template>
  <div ref="layoutRoot" class="layout layout--default" :class="layoutClassObj">
    <nuxt-page />

    <client-only>
      <app-banner v-if="hasBanner" :data="banner" />
    </client-only>
  </div>
</template>

<script setup>
import { watch, ref } from 'vue'
const { banner, hasBanner } = storeToRefs(useNuxtApp().$app.store.common)

const layoutClassObj = computed(() => ({
  'has-banner': hasBanner.value
}))

const layoutRoot = ref(null)

// 监听hasBanner变化，手动同步类名
watch(hasBanner, (hasBannerVal) => {
  if (!layoutRoot.value) return
  hasBannerVal 
    ? layoutRoot.value.classList.add('has-banner') 
    : layoutRoot.value.classList.remove('has-banner')
}, { immediate: true }) // 立即执行一次，确保初始状态正确
</script>

方案2：让布局依赖页面异步数据的完成 #

如果banner是页面级专属数据，可以通过usePage获取页面异步数据的状态，确保布局在数据加载完成后再计算类名：

<template>
  <div class="layout layout--default" :class="layoutClassObj">
    <nuxt-page />

    <client-only>
      <app-banner v-if="hasBanner" :data="banner" />
    </client-only>
  </div>
</template>

<script setup>
const { banner, hasBanner } = storeToRefs(useNuxtApp().$app.store.common)
const page = usePage()

// 等待页面异步数据加载完成后再计算类名
const layoutClassObj = computed(() => ({
  'has-banner': page.value.asyncDataState.resolved && hasBanner.value
}))
</script>

方案3：将banner加载逻辑提升到全局 #

如果banner是全局通用数据，把加载逻辑从子页面移到Nuxt插件或app.vue中，确保布局渲染前数据已准备完毕：

// plugins/loadBanner.ts
export default defineNuxtPlugin(async () => {
  const commonStore = common()
  // 替换为你的banner接口请求
  const { data } = await useAsyncData('banner', () => $fetch('/api/banner'))
  if (data.value) {
    commonStore.banner = data.value
  }
})

这样布局组件在SSR阶段就能拿到已加载的banner数据，直接渲染出正确的has-banner类名。

内容的提问来源于stack exchange，提问作者lbloodl