我正在使用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>

但是，即使单击按钮，修改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内部，我可以看到状态cards未更改（正如我在应用程序中看到的一样）。
任何帮助都将不胜感激。谢谢。
注：我遵循了this教程。