0

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

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

应用程序.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>

字符.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)
        }
    }
})
4

1 回答 1

1

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

this.characters.push(results) // ❌

要将所有作为单独的数组元素推results入，请使用扩展运算符（即，）：characters...results

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

演示

于 2022-03-06T00:02:35.177 回答