In meiner Bewerbung habe ich einen Satz Spielkarten im Vuex-Store gespeichert.

Der Spieler gibt einen Spiel-Pin ein und der Code überprüft ihn und erhält die Spielkarten für diesen Pin, speichert sie im Speicher und öffnet die Speicherkomponente:

checkPinExists(){
    
        //this.$store.dispatch('retrieveGameByPin', this.enteredPin)
        this.retrieveGameByPin(this.enteredPin)
        .then(res =>  {
            this.fetchGameCards(this.currentGame.id);  // als spel bestaat de bijbehorende kaarten in de store opslaan
            this.currentGameError = false;    // dus als we hier zijn is er geen gameerror...
            this.checked= true;
        if (this.currentGame.game_status === 'actief'){
            this.$router.push("memory");
        }
        })  
        .catch(err => {
            this.currentGameError = true;
            console.error(err);
        });
      
            
    }

fetchGameCrds ist eine Vuex-Operation:

export const fetchGameCards = ({commit}, game_id) => {
    return new Promise((resolve, reject) => {     
        let status = '';
        let data ={};
       console.log("fetching gameCards  ");
        fetch(`api/cardsByGame/${game_id}`)
        .then(async res => {
            status = res.status;
            if(status === 200) {
                data = await res.json(); 
            }
            else {
                data =null;
            } 
        })
        .then(res=>{
            if ( status === 200) {
                commit('SET_GAME_CARDS', data);
                resolve('GameKaarten gevonden');
            }
            else {
                reject('Geen gamekaartenkaart beschikbaar');
            }
        });
    });
}

In der Memory-Komponente werden die Karten abgerufen und das Spiel beginnt. Leider konnte ich die Spielkarte nicht rechtzeitig im Laden bekommen.

Im Entwicklerbereich des Browsers sehe ich, dass sich die Karte im Store befindet.

Memoryscript beginnt mit einigen Debug-Meldungen:

<script>
import { mapState, mapActions } from 'vuex';

export default {
   mounted() {
        
    console.log("at mounted show GameCards:"),
    console.log(this.gameCards);

    this.createDeck(),
    this.createShowCards()
           
    },

    computed: {
        ...mapState([
        'currentSpeler' ,'currentSpelerCard', 'currentGame', 'gameCards'
        ]),

Die Ausgabe in der Konsole sieht etwa so aus:

at mounted show GameCards:

[Handler]]: Array(0)
length: 0

Kann jemand sehen, wie ich dieses Problem lösen kann?

Ich möchte die Karten nicht in der Komponente selbst erhalten, da ich die Spielkarten auch in anderen Komponenten verwenden möchte, anstatt sie jedes Mal aus dem Backend zu beziehen.