Pinia Composition API中'this'类型注解缺失的TS问题求助

问题本质 #

你通过Pinia插件挂载axios实例后，Composition API下this.$axios触发TS2683错误，是因为TypeScript默认无法识别自定义添加到Pinia store的$axios属性类型。Options API能正常推导类型，是Pinia对该模式做了内置类型兼容处理。

解决方案 #

1. 扩展Pinia类型声明 #

在项目中创建类型声明文件（比如types/pinia.d.ts），手动扩展PiniaCustomProperties接口，让TS识别$axios属性：

import type { PiniaCustomProperties } from 'pinia'
import type { AxiosInstance } from 'axios'

declare module 'pinia' {
  export interface PiniaCustomProperties {
    $axios: AxiosInstance
  }
}

确保tsconfig.json包含该类型文件路径：

{
  "compilerOptions": {
    "types": [
      "@nuxt/types",
      "@types/axios",
      "./types"
    ]
  }
}

2. 修正插件的类型注解 #

替换插件中模糊的any类型为官方类型，避免类型丢失：

import type { Pinia } from 'pinia'
import type { NuxtApp } from '@nuxt/types'

const piniaPlugin = ({ $pinia, app }: { $pinia: Pinia; app: NuxtApp }): void => {
  $pinia.use(({ store }) => {
    store.$axios = app.$axios;
  });
};

3. Store中正确使用 #

• Options API风格：this.$axios会自动获得正确类型，直接使用即可：

import { defineStore } from 'pinia'

export const useDemoStore = defineStore('demo', {
  actions: {
    async fetchData() {
      const response = await this.$axios.get('/api/demo')
      // 业务逻辑
    }
  }
})

• Composition API风格：setup函数中this不指向store实例，直接通过store自身访问$axios：

import { defineStore } from 'pinia'

export const useDemoStore = defineStore('demo', () => {
  const fetchData = async () => {
    const store = useDemoStore()
    const response = await store.$axios.get('/api/demo')
    // 业务逻辑
  }

  return { fetchData }
})

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