Pinia+Vue3+TypeScript中计算状态的类型注解问题及解决

原因分析 #

1. Pinia自动解包机制：在Pinia的setup模式中，返回的computed（以及ref）会被自动解包，对外暴露的是计算后的原始值（number/boolean），而非ComputedRef实例。你手动给属性标注ComputedRef<number | boolean>，和Pinia实际返回的类型不匹配，导致TS报错。
2. 运行时访问差异：直接访问rcu.current_setting能拿到正确值，是因为Pinia已经自动解包了ComputedRef；而访问.value时，相当于在原始值（number/boolean类型）上读取.value属性，自然返回undefined。

正确类型注解方式 #

1. Store定义时的类型处理 #

不要给计算属性标注ComputedRef类型，直接标注实际值类型，或让TypeScript自动推断：

import { defineStore } from 'pinia'
import { computed, ref } from 'vue'

export const useRcuStore = defineStore('rcu', () => {
  const baseState = ref(10)

  // 方式1：手动标注实际值类型
  const current_setting: number | boolean = computed(() => baseState.value > 5)
  // 方式2：更优，让TS自动推断类型（推荐）
  const io_enable = computed(() => baseState.value % 2 === 0)

  // item_mapping同样标注实际值类型
  const item_mapping: Record<string, { read: number | boolean }> = {
    'current_setting': { read: current_setting },
    'io_enable': { read: io_enable }
  }

  return { current_setting, io_enable, item_mapping }
})

2. 组件中获取带Ref包装的属性 #

如果需要在组件中保留ComputedRef包装（比如用于响应式绑定的场景），可以使用storeToRefs：

import { useRcuStore } from '@/stores/rcu'
import { storeToRefs } from 'pinia'

const rcu = useRcuStore()
// 通过storeToRefs获取的是带包装的ComputedRef，需要访问.value
const { current_setting } = storeToRefs(rcu)
console.log(current_setting.value)

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