$store error with vue 3 and vuex 4

[LiamWiddop]

Following up from a recent thread vuejs vetur.
I am having the effectively the same issue on a windows machine, where I receive the following error:

Interestingly... this causes errors.

But this does not.

I believe am using the Vue 3 and Vuex 4 correctly:

Can someone help me clarify where the issue is? The guys at vuejs (see thread above) felt it was related to vue-class-component.

Thanks in advance!

[ktsn]

You have to declare the $store type by yourself. See https://github.com/vuejs/vuex/tree/4.0#typings-for-componentcustomproperties

[Newfffff]

/**
 * Custom properties added to component instances in any way and can be accessed through `this`
 *
 * @example
 * Here is an example of adding a property `$router` to every component instance:
 * ```ts
 * import { createApp } from 'vue'
 * import { Router, createRouter } from 'vue-router'
 *
 * declare module '@vue/runtime-core' {
 *   interface ComponentCustomProperties {
 *     $router: Router
 *   }
 * }
 *
 * // effectively adding the router to every component instance
 * const app = createApp({})
 * const router = createRouter()
 * app.config.globalProperties.$router = router
 *
 * const vm = app.mount('#app')
 * // we can access the router from the instance
 * vm.$router.push('/')
 * ```
 */
export interface ComponentCustomProperties {}

I found this in vue source code(vue-next/packages/runtime-core/src/componentPublicInstance.ts / ).you can declear $router in main.tsor in shims-vue.d.ts, I try to put the declear code in seperate .d.ts file,it won't work.