Tengo un bloque <script setup> en el que importo mi testStore pero cada vez que quiero usar this.testStore.name en algún lugar de mi archivo vue vetur me da este 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)Como soy un mecanografiado n00b, realmente no sé cómo solucionar esto y los documentos de Pinia realmente no parecen ayudarme en este asunto (solo puedo encontrar cómo puedo hacer una cuña para propiedades personalizadas pero nada sobre tener que definir mis tiendas o algo así).
este es mi archivo de tienda pinia (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, });Este es mi archivo .vue
<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>Creo que tu código debería ser
<script setup lang="ts"> import { defineComponent } from 'vue' import { useTestStore } from '@/stores/testStore'; const testStore = useTestStore(); console.log(testStore); // testStore should displayed </script> <template> {{ testStore.name }} </template>Aviso:
<script setup lang="ts"></script>y
<script lang="ts"> export default defineComponent({}); </script>Ambos se usan para definir componentes, use uno de ellos, no use ambos.
Algunos documentos de Vue que podría necesitar: