Tengo un problema con vue3/pinia. Ver.vue en la parte inferior:

 <script setup> import useAccount from '../stores/account.js'; import { ref } from 'vue'; import LocaleSwitch from '../components/LocaleSwitch.vue'; import { onMounted } from 'vue'; const { user, logout, widgets } = useAccount(); const showWidgets = ref(widgets); onMounted( function showWidgetslog() { console.log('showWidgets - ', showWidgets) } ) </script> <template> <LocaleSwitch /> <article> <section> {{ $t('account') }}: {{ user.fullName }} </section> <button class="primary" @click="logout">Logout</button> </article> </template>

En View.vue, estoy intentando mostrar en la consola showWidgets, pero cada vez que aparece el error 'establecer' en el proxy: la trampa devolvió falso para la propiedad 'widgets'.

Este View.vue llama cuando llamo a la página principal en el enrutador:

 routes: [{ path: '/', name: 'account', meta: { title: 'Main' }, component: AccountView, async beforeEnter(to, from, next) { const { fetchDesktop, id } = useAccount(); const { fetchStaffPerson } = useStaff(); await fetchDesktop(); await fetchStaffPerson(id); return next(); }, },

Antes de renderizar la página principal (View.vue) llama a la tienda pinia:

 import { defineStore } from 'pinia'; import router from '../router'; import api from '../services/api.js'; export default defineStore({ id: 'account', state: () => ({ counters: {}, widgets: {}, }), getters: { token: () => localStorage.getItem('token'), user: () => JSON.parse(localStorage.getItem('user')), id() { return this.user.id }, club: () => localStorage.getItem('club'), widgets: (state) => state.widgets, }, actions: { async fetchDesktop(widgetIndex) { try { let params = { firstCount: 0, secondCount: 0, thirdCount: 0, club: this.club, }; if (widgetIndex == "first") { params.firstOffset = this.widgets[widgetIndex].items.length; params.firstCount = 30; } if (widgetIndex == "second") { params.secondOffset = this.widgets[widgetIndex].items.length; params.secondCount = 30; } if (widgetIndex == "third") { params.thirdOffset = this.widgets[widgetIndex].items.length; params.thirdCount = 30; } this.widgets = await api("desktop.get", params); } catch ({ message }) { console.error(message); } }, } });

¿Por qué aparece este error? Lógicamente, supongo, está bien. Hay un enlace de enrutador, que llama a la acción en la tienda pinia (fetchDesktop), y luego calcula la página principal de representación (View.vue)