Error: this.$store does not exist on type class. (Vue 3 + TypeScript)

• [ x ] I have searched through existing issues
• [ x ] I have read through docs
• [ x ] I have read FAQ

Info

• Platform: Ubuntu 20.04 (WSL2, Ubuntu Budgie)
• Vetur version: 0.27.3
• VS Code version: 1.49.1

Problem

Reproducible Case

1. Use the Vue CLI to create a Vue 3 project with TypeScript using class component style syntax.
2. Go into the store and create any state object.
3. In your class (happens in methods, computed, anything), call this.$store,
4. See vetur complain that this.$store does not exist on the class.

I followed this link: https://discordapp.com/channels/325477692906536972/568037134968160256/756604272484941856 after speaking with some people on the Vue discord, and added the vuex-shim.d.ts file which did fix it but it stopped working again, I swapped it to use Store<any> instead.

See my shim:

import { ComponentCustomProperties } from 'vue'
import { Store } from 'vuex'

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

	interface ComponentCustomProperties {
		$store: Store<any>
	}
}

[rodrigoslayertech]

The same error here using Quasar Framework, after upgrade from Quasar v1 (Vue 2) to Quasar v2 (Vue 3)

[luucaskenji]

@ngekoding or anyone else looking for a solution to this. I spent hours looking for a solution and the following code worked for me: First, when mounting the app, create a global property for $store:

// main.ts

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

const app = createApp(App);
app.config.globalProperties.$store = store;
app.use(router).mount('#app');

then I created this file in src folder:

// shims-vuex.d.ts

import { Store } from 'vuex';

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $store: Store<T>;
  }
}

I don’t know if it could help, but I stopped and ran the project again (yarn serve) More info here