Property '$store' does not exist on type 'ComponentPublicInstance' using Vuex 4 with typescript

Question

I have a project where I am using typescript and vue with vuex, I am having this error on 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 ..., {}>>'

I read the documentation and there it says I have to add a d.ts file with this content:

// 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>
  }
}

But then VSCode complains than 'ComponentCustomProperties' is defined but never used, and it is still show the first error I mentioned

How can I solve this issues?

Answer 1

I also encountered this error on VSCode and it was resolved.

// 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>
  }
}

The configuration according to the official document did not take effect. After restarting VSCode, it finally took effect.