Vue.js + Pinia项目ESLint与TypeScript报错解决求助

问题1：ESLint提示“'state:' is defined but never used.” #

• 原因：你使用了Pinia的组合式API写法（defineStore第二个参数是函数），但错误套用了选项式API的state:字段语法。组合式写法不需要这个字段，直接用ref/reactive定义响应式状态即可。
• 修正后的@/stores/user.ts代码：

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

export const useUserStore = defineStore('user', () => {
  // 用ref定义响应式状态
  const name = ref('')

  // 必须return出去才能在外部访问
  return { name }
})

问题2：TypeScript提示“Property 'name' does not exist on type 'Store<"user", {}, {}, {}>'” #

• 原因：第一个问题里的store定义错误，导致Pinia无法自动推导状态的类型，TS识别不到name属性。
• 解决方法：按照上面的方式修正store写法后，Pinia会自动基于返回的ref推导类型，此时在Vue组件中访问userStore.name就不会有TS报错了。

补充：如果你更习惯选项式API写法 #

也可以把defineStore的第二个参数改成对象，同样能解决两个问题：

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => {
    return {
      name: ''
    }
  }
})

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