Pinia Store外部使用时类型推断丢失原因咨询

我的Store代码如下：

export const useMyStore = defineStore('myStore', () => {
    const { data, pending, execute } = useFetch<{id: string, joke:string, status: number}>('https://icanhazdadjoke.com/', {
        immediate: false,
        headers: {
            Accept: 'application/json'
        },
        pick: ['joke']
    });
    return { data, pending, execute }
});

在Store内部，data的类型被正确推断为：

data: globalThis.Ref<{id: string, joke: string, status: number} | null>

但在其他地方使用该Store时，类型推断丢失，data的类型变为any，请问这是什么原因？

原因分析与解决方案 #

原因 #

这是因为Pinia在处理setup函数返回值时，对于Ref类型的泛型推导存在隐式丢失的情况。当你在Store内部解构useFetch的返回值时，data的类型是明确的，但将其作为Store属性导出后，Pinia的类型系统无法正确保留Ref的内部泛型信息，导致外部使用时被推断为any。

解决方案 #

1. 显式指定Store返回类型

给defineStore的setup函数显式标注返回类型，让TypeScript明确返回值的结构：

import { defineStore } from 'pinia'
import type { Ref } from 'vue'

// 定义Store返回值的类型
type MyStoreReturn = {
  data: Ref<{id: string, joke: string, status: number} | null>
  pending: Ref<boolean>
  execute: () => Promise<void>
}

export const useMyStore = defineStore('myStore', (): MyStoreReturn => {
  const { data, pending, execute } = useFetch<{id: string, joke:string, status: number}>('https://icanhazdadjoke.com/', {
    immediate: false,
    headers: {
      Accept: 'application/json'
    },
    pick: ['joke']
  });
  return { data, pending, execute }
});

2. 使用storeToRefs辅助函数

在组件或其他地方使用Store时，不要直接解构Store实例，而是用Pinia提供的storeToRefs函数，它会保留所有响应式属性的类型信息：

import { useMyStore } from '@/stores/myStore'
import { storeToRefs } from 'pinia'

const store = useMyStore()
const { data, pending } = storeToRefs(store)
// 此时data的类型会正确保留为Ref<{id: string, joke: string, status: number} | null>

3. 检查依赖版本兼容性

较旧的TypeScript或Pinia版本可能存在类型推导bug，更新到最新稳定版通常能解决这类问题。

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