Pinia 動作不上傳數組 object state (Vue 3)

Question

我正在使用 Vue 3 和 Pinia，我有一個商店cards.js ，就像這個：

import { defineStore } from 'pinia'
import { useLanguageStore } from './language'
import axios from 'axios'


export const useCardsStore = defineStore({
    id: 'cards',
    state: () => ({
        cards: []
    }),
    actions: {
        async generateCards() {
            const languageStore = useLanguageStore();

            this.cards = (await axios({
                method: "post",
                url: "<endpoint>", // some endpoint
                data: {
                    text: languageStore.sentence,
                    language: languageStore.language
                }
            })).data.map(token => ({
                text: token.text,
                pos: token.pos,
            }));

            console.log(this.cards)  // see (*)
        }
    }
})

然后，在一個組件中，我使用這樣的東西：

<template>
...
   <input v-model="sentence">
   <button @click.prevent="generateCards()">Generate</button>
...
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { useCardsStore } from '../stores/cards'
import { useLanguageStore } from '../stores/language'

const { cards } = storeToRefs(useCardsStore())
const { sentence } = storeToRefs(useLanguageStore())
const { generateCards } = useCardsStore()
</script>

然而，即使當我點擊按鈕時，控制台 output 在 mofifying this.cards (*) 之后是：

Proxy {0: {…}, 1: {…}, 2: {…}, 3: {…}}
  [[Handler]]: Object
  [[Target]]: Array(4)
    0: {text: 'esto', pos: 'PRON'}
    1: {text: 'es', pos: 'VERB'}
    length: 2
  [[Prototype]]: Array(0)
  [[IsRevoked]]: false

（因此數組被正確生成）在 Vue devtools 內部，我可以看到 state cards沒有改變（我可以在應用程序中看到它）。

任何幫助，將不勝感激。 謝謝你。

注意：我遵循了本教程。

Answer 1

答案由@Phil提供。 在文檔中有一個關於不破壞商店的鏈接。 正確的方法是改變

const { generateCards } = useCardsStore()

到

const store = useCardsStore()

並使用store.generateCards而不是在模板中store 。