Soy nuevo en Pinia y tengo problemas para configurar solo una tienda básica. He estado siguiendo la propia documentación de Pinia y parece que no puedo leer ningún estado del componente vue que estoy asignando a la tienda de Pinia.
En mi aplicación tengo:
import { createPinia } from 'pinia'; export default function initApp(el) { let app = createApp(MenuApp); app.use(router).use(createPinia()).mount(el); }Configuré una tienda Pinia súper básica, solo para comenzar:
import {defineStore} from 'pinia'; export const useTestPiniaStore = defineStore('testStore', { state: () => { return { name: 'bob' } }, })En mi componente vue tengo:
<template> <div class="menu-page"> <h1>{{name}}</h1> </div> </template> <script> import { mapState } from 'pinia'; import useTestPiniaStore from '@store/modules/piniaStore'; export default { computed: { ...mapState(useTestPiniaStore['name']), } } </script> Pinia aparece en mis herramientas de desarrollo de Vue, pero no aparecen tiendas dentro de él, y aparece el error Cannot read properties of undefined (reading 'name')
No entiendo qué estoy haciendo mal aquí. Si alguien puede dar algunos consejos, sería muy apreciado.
mapState() requiere dos argumentos, pero solo le has pasado uno.
El primer argumento debe ser useTestPiniaStore y el segundo debe ser una matriz de propiedades de estado para mapear (o un objeto). Parece que está tratando de hacer referencia al name de useTestPiniaStore , que sería undefined .
Su accesorio calculado debería verse así:
<script> import { mapState } from 'pinia' import { useTestPiniaStore } from '@/store' export default { computed: { ...mapState(useTestPiniaStore, ['name']), 👈 }, } </script>