Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

127
Vistas
'set' on proxy: trap returned falsish for property 'widgets'

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)

7 months ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Planes Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.