无法使用 Pinia Store 从状态检索数据

Question

我正在尝试使用 Vue3 克服组合 API 和 Pinia。

我正在调用外部 API 来获取一些数据并将其存储在商店的状态中，我的问题是，当我从页面调用此状态时，它似乎是空的，我无法检索我在商店的操作部分中调用的数据。我在这个过程中有什么错误的想法吗？

App.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>

character.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)
        }
    }
})

Answer 1

问题是整个 results 数组作为一个元素插入到 characters 中：

this.characters.push(results) // ❌

将所有 results 推入 characters 作为单个数组元素，使用 扩展运算符（即...结果）：

this.characters.push(...results) // ✅

演示