Не удается получить данные из состояния с помощью Pinia Store

Question

Я пытаюсь преодолеть API композиции и Pinia с помощью Vue3.

Я звоню внешнему 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>

характер.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

Проблема в том, что весь массив вставляется как один элемент:

      this.characters.push(results) // ❌

Чтобы подтолкнуть все resultsв charactersкак отдельные элементы массива, используйте оператор распространения (т.е. ...results):

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

демо