I have problem with vue3/pinia. View.vue at the bottom:
<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>
In View.vue I am trying show in console showWidgets, but every time appears error 'set' on proxy: trap returned falsish for property 'widgets'.
This View.vue calls when I call main page in router:
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();
},
},
Before rendering main page (View.vue) calls store 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);
}
},
}
});
Why this error is appear? Logically, I guess, all right. There is router hook, that calls action in pinia store (fetchDesktop), and after calculates render main page (View.vue)