Estoy tratando de superar la API de composición y Pinia con Vue3.
Estoy haciendo una llamada a una API externa para obtener algunos datos y almacenarlos en el estado de la tienda, mi problema aquí es que cuando llamo a este estado desde mi página, parece estar vacío y no puedo recuperar el datos que he estado llamando en la sección de acciones de mi tienda. ¿Alguna idea de dónde me equivoco en el proceso?
aplicación.vue
<template> <h1>Rick And Morty</h1> <ul> <li v-for="(item, index) in characters" :key="index"> {{item}} </li> </ul> </template> <script> import { useCharactersStore } from '@/stores/characters' import { onBeforeMount } from 'vue' export default { setup() { const useStore = useCharactersStore() const characters = useStore.characters console.log("Store: " + characters) onBeforeMount(() => { useStore.fetchCharacters() }) return { useStore, characters } }, } </script>personaje.js
import { defineStore } from 'pinia' export const useCharactersStore = defineStore('main', { state: () => { return { characters: [], page: 1 } }, actions: { async fetchCharacters() { const res = await fetch('https://rickandmortyapi.com/api/character/') const { results } = await res.json() this.characters.push(results) console.log("Back: " + this.characters) } } })El problema es que toda la matriz de results se inserta en characters como un solo elemento:
this.characters.push(results) // ❌ Para insertar todos los results en characters como elementos de matriz individuales, use el operador de propagación (es decir, ...results ):
this.characters.push(...results) // ✅