如何基于Pinia状态动态更新body类？路由切换时不生效

需求是根据Pinia store中的布尔值isActive给body动态切换class，但当前仅页面首次加载时生效，路由切换后无法更新。

原代码 #

Store 代码 #

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'}`,
  },
});

问题原因 #

useHead初始化时传入的是静态配置对象，只会在组件首次渲染时计算一次isActive.value的值。后续isActive状态变化时，不会触发useHead重新更新body的class属性。

解决方案 #

方案1：使用响应式对象传递配置 #

通过Vue的响应式特性，让bodyAttrs成为响应式对象，依赖变化时自动更新：

import { useActiveStore } from '~/store/isActive';
import { storeToRefs } from 'pinia';
import { reactive, computed } from 'vue';

const isActiveStore = useActiveStore();
const { isActive } = storeToRefs(isActiveStore);

const bodyAttrs = reactive({
  class: computed(() => isActive.value ? 'isActive' : 'isNotActive')
});

useHead({
  bodyAttrs
});

方案2：使用useHead的回调函数形式 #

useHead支持传入返回配置的函数，函数会在响应式依赖变化时重新执行，自动更新head配置：

import { useActiveStore } from '~/store/isActive';
import { storeToRefs } from 'pinia';

const isActiveStore = useActiveStore();
const { isActive } = storeToRefs(isActiveStore);

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

额外优化：清理无用代码 #

Store中的getID getter未使用参数e，且仅返回isActive，完全可以移除，简化Store代码：

export const useActiveStore = defineStore({
  id: 'active-store',
  state: () => {
    return {
      isActive: false,
    };
  },
});

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