使用带有打字稿的 Vuex 4，类型“ComponentPublicInstance”上不存在属性“$store”

Posted 2023-03-13

【中文标题】使用带有打字稿的 Vuex 4，类型“ComponentPublicInstance”上不存在属性“$store”

【英文标题】：Property '$store' does not exist on type 'ComponentPublicInstance' using Vuex 4 with typescript

【发布时间】：2021-03-22 00:42:46

【问题描述】：

我有一个项目，我在 vuex 中使用 typescript 和 vue，我在 VSCode 上遇到此错误：

Property '$store' does not exist on type 'ComponentPublicInstance<, , ,  errors(): any; ,  eliminarError(error: string): void; , EmitsOptions, , , false, ComponentOptionsBase<, , ,  errors(): any; ,  eliminarError(error: string): void; , ... 4 more ..., >>'

我阅读了the documentation，它说我必须添加一个包含此内容的 d.ts 文件：

// vuex.d.ts
import  ComponentCustomProperties  from 'vue'
import  Store  from 'vuex'

declare module '@vue/runtime-core' 
  // declare your own store states
  interface State 
    count: number
  

  // provide typings for `this.$store`
  interface ComponentCustomProperties 
    $store: Store<State>
  

但随后 VSCode 比 'ComponentCustomProperties' is defined but never used 抱怨，它仍然显示我提到的第一个错误

我该如何解决这个问题？

【参考方案1】：

我在VSCode上也遇到了这个错误，已经解决了。

// vuex.d.ts
import  ComponentCustomProperties  from 'vue'
import  Store  from 'vuex'

declare module '@vue/runtime-core' 
  // declare your own store states
  interface State 
    count: number
  

  // provide typings for `this.$store`
  interface ComponentCustomProperties 
    $store: Store<State>
  

按照官方文档的配置没有生效。重启VSCode后，终于生效了。

【参考方案2】：

将/* eslint-disable */ 添加到 shims-vuex.d.ts 文件的顶部