Nuxt 3，Pinia 根据布尔状态更新 bodyClass

Question

是否可以根据 Pinia 商店的商店布尔值动态更新主体类？我能够在页面加载时获取该值，但当我切换路由时它不会更新。

店铺：

export const useActiveStore = defineStore({
  id: 'active-store',
  state: () => {
    return {
      isActive: false,
    };
  },
  getters: {
    getID(e: any) {
      return this.isActive;
    },
  },
});

组件：

import { useActiveStore } from '~/store/isActive';
import { storeToRefs } from 'pinia';
const isActiveStore = useActiveStore();

const { isActive } = storeToRefs(isActiveStore);


useHead({
  bodyAttrs: {
    class: `${isActive.value ? 'isActive' : 'isNotActive'}`,
  },
});

Answer 1

尝试在您的商店中添加

hydrate

功能：https://pinia.vuejs.org/cookbook/composables.html#SSR