Within my <script setup> block, I have imported my testStore. However, whenever I attempt to use this.testStore.name in my Vue file, Vetur displays the following error:
Property 'testStore' does not exist on type 'CreateComponentPublicInstance<{ [x: string & `on${string}`]: ((...args: any[]) => any) | undefined; } | { [x: string & `on${string}`]: undefined; }, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ... 10 more ..., {}>'.
Property 'testStore' does not exist on type '{ $: ComponentInternalInstance; $data: {}; $props: { [x: string & `on${string}`]: ((...args: any[]) => any) | undefined; } | { [x: string & `on${string}`]: undefined; }; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> | undefined): WatchStopHandle; } & { ...; } & ShallowU...'.Vetur(2339)
As a beginner in typescript, I am unsure how to resolve this issue. The Pinia documentation does not offer clear guidance on this matter (I could only find information on creating a shim for custom properties but nothing regarding defining stores).
This is my pinia store file (testStore.ts)
import { defineStore } from 'pinia';
const state = () => ({
name: 'This is my store'
});
const actions = {};
const getters = {
};
export const useTestStore = defineStore('testStore', {
state,
getters,
actions,
});
This is my .vue file
<script setup lang="ts">
import { defineComponent } from 'vue'
import { useTestStore } from '@/stores/testStore';
const testStore = useTestStore();
</script>
<template>
{{ testStore.name }}
</template>
<script lang="ts">
export default defineComponent({
name: 'testStore',
mounted () {
console.log(this.testStore.name)
}
});
</script>