Nuxt+Pinia导航状态栏选中，怎么在渲染前就进行修改？

Question

storeHeader

export const useHeader = defineStore('header', {
      state: () => ({ 
            dark: false
      }),
})

Header组件

<template>
  <header :class="[style['header'] , { [style['dark']] : dark}]">
    ...........
  </header>
</template>
<script lang="ts" setup>
// 状态管理
const storeHeader = useHeader()
// 暗黑状态
const { dark } = storeToRefs(storeHeader)
</script>

index.vue

<script lang="ts" setup>
// 状态管理
const storeHeader = useHeader()
// 暗黑状态
const { dark } = storeToRefs(storeHeader)
// 顶部关闭暗黑
dark.value = false
</script>

detail.vue

<script lang="ts" setup>
// 状态管理
const storeHeader = useHeader()
// 暗黑状态
const { dark } = storeToRefs(storeHeader)
// 顶部开启暗黑
dark.value = true
</script>

现在的情况是我从index进入detail页面，页面会执行dark.value = true开启顶部暗黑

但是在detail页面F5刷新后则不会，需要将dark.value = true放在onMounted中或则延时执行，这种就会出现页面加载完后再载入class，页面就会闪一下，相当于动态添加了class

有没有办法在服务器渲染前就修改dark.value = true

Answer 1

用asyncData方法：

<script lang="ts">
import { useHeader } from '~/store/header'

export default {
  async asyncData() {
    const storeHeader = useHeader()
    storeHeader.dark = true
  },
  // 其他代码...
}
</script>

用fetch方法：

<script lang="ts">
import { useHeader } from '~/store/header'

export default {
  fetch() {
    const storeHeader = useHeader()
    storeHeader.dark = true
  },
}
</script>