Currently working with Vue 3 and Pinia, I have a store called cards.js structured like this:
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>", // sample endpoint
data: {
text: languageStore.sentence,
language: languageStore.language
}
})).data.map(token => ({
text: token.text,
pos: token.pos,
}));
console.log(this.cards) // see (*)
}
}
})
Within a component, I implement something similar to this:
<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>
Despite clicking the button and updating this.cards (*), the console output is as follows:
Proxy {0: {…}, 1: {…}, 2: {…}, 3: {…}}
[[Handler]]: Object
[[Target]]: Array(4)
0: {text: 'this', pos: 'PRON'}
1: {text: 'is', pos: 'VERB'}
length: 2
[[Prototype]]: Array(0)
[[IsRevoked]]: false
(Showing that the array is being generated correctly) However, in Vue devtools and within the application itself, the state of cards remains unchanged.
Any assistance on this matter would be greatly appreciated. Thank you.
Note: I followed a tutorial available here.