Estoy usando Pinia para la administración del estado en una aplicación Vue 2, y cuando inicio el servidor de desarrollo y visito localhost:8080 el siguiente error:
[Vue warn]: Error in render: "TypeError: this.IssueStore is undefined" found in ---> <ATable> at src/components/AlertTable/main.vue <Inbox> at src/views/AlertInbox.vue <MMApp> at src/components/App/main.vue <App> at src/App.vue <Root> Seguido de un registro de la consola: 🍍 "IssueStore" store installed
Entonces parece que el componente está usando la tienda antes de que Pinia esté lista. Si luego actualizo un componente dentro del proyecto, lo que hace que el servidor de desarrollo vuelva a compilar, todo funciona como se esperaba.
Aquí está la tienda: se ha eliminado un código:
export const useIssueStore = defineStore('IssueStore', { state: () => { return { issues: [], }; }, getters: { ... } }, actions: { ... } });Aquí está el componente que arroja el error:
<template> <Table :columns="columns" :rows="getIssues" :selectable="true" /> </template> <script> import { useIssueStore } from '@/stores/IssueStore'; import { mapStores } from 'pinia' import { Table } from '@/components'; export default { name: 'ATable', components: { Table }, data() { return { columns: [], } }, computed: { ...mapStores(useIssueStore), getIssues() { return this.IssueStore.filteredIssues; } }, } </script> Esto es main.js :
import Vue from "vue"; import App from "./App.vue"; import router from "./router"; import { createPinia, PiniaVuePlugin, setMapStoreSuffix } from "pinia"; import VueCompositionAPI from "@vue/composition-api"; Vue.config.productionTip = false; Vue.use(PiniaVuePlugin); const pinia = createPinia(); setMapStoreSuffix(''); Vue.use(VueCompositionAPI); new Vue({ pinia, router, render: (h) => h(App), }).$mount("#app");¿Alguna idea sobre lo que puede estar causando esto?