typescript - 属性 '$store' 在类型 'ComponentPublicInstance' 上不存在，使用 Vuex 4 和 typescript

Question

我有一个项目，我在 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 提示，它仍然显示我提到的第一个错误
我该如何解决这个问题？

Answer 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后，终于生效了。