vue.js - 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>