Pinia状态在对象中使用时丢失响应性的问题排查

问题场景 #

我在梳理Pinia Store状态的响应性相关问题，现有如下代码：

Store文件（@/stores/settings.js） #

import { defineStore } from 'pinia'

export const useSettings = defineStore('Settings', {
  state: () => ({
    useDarkTheme: false
  }),
  persist: true
})

组件文件（App.vue） #

<script setup>
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useSettings } from '@/stores/settings'

const settings = useSettings()
const { useDarkTheme } = storeToRefs(settings)

let appClasses = ref({
  'test-class': true,
  'dark-theme': useDarkTheme.value
})
</script>

<template>
  <div class="app-wrapper" :class="appClasses">
    <div class="app-content" :class="useDarkTheme ? 'dark' : 'light'">
            /* ... */
        </div>
  </div>
</template>

现象描述 #

• app-content元素上的useDarkTheme具备响应性：Store中值改变时，类会在“light”和“dark”之间切换，无需刷新应用。
• 但useDarkTheme用于appClasses对象中时丢失响应性：“dark-theme”类仅在组件加载时根据Pinia存储的值应用，之后不会随Store变化更新（除非刷新组件），用reactive替代ref也存在同样问题。

原因分析 #

初始化appClasses时，你直接赋值了useDarkTheme.value的当前静态值，并没有建立响应式依赖关联。当useDarkTheme后续变化时，appClasses里的dark-theme属性不会自动更新——因为它没有订阅useDarkTheme的状态变化。

解决方案 #

有两种常用的修复方式：

方式1：使用计算属性（推荐） #

将appClasses改为计算属性，它会自动追踪useDarkTheme的变化并实时更新：

<script setup>
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useSettings } from '@/stores/settings'

const settings = useSettings()
const { useDarkTheme } = storeToRefs(settings)

// 用computed替代ref，建立响应式依赖
const appClasses = computed(() => ({
  'test-class': true,
  'dark-theme': useDarkTheme.value
}))
</script>

方式2：手动监听useDarkTheme的变化 #

通过watch监听useDarkTheme的状态变化，手动更新appClasses：

<script setup>
import { ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useSettings } from '@/stores/settings'

const settings = useSettings()
const { useDarkTheme } = storeToRefs(settings)

const appClasses = ref({
  'test-class': true,
  'dark-theme': useDarkTheme.value
})

// 监听useDarkTheme的变化，手动更新appClasses
watch(useDarkTheme, (newVal) => {
  appClasses.value['dark-theme'] = newVal
})
</script>

为什么reactive也不行？ #

如果之前用reactive定义appClasses，同样是因为初始化时仅赋值了静态值，未建立响应式依赖关系。改用计算属性或手动监听的方式，同样能解决问题。

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