Dans mon application, j'ai un jeu de cartes de jeu stocké dans la boutique vuex.

Le joueur remplit un code PIN de jeu et le code le vérifie et obtient les cartes de jeu pour ce code PIN, les stocke dans le stockage et ouvre le composant mémoire :

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 est une opération vuex :

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');
            }
        });
    });
}

Dans le composant mémoire, les cartes sont récupérées et le jeu commence. Malheureusement, je n'ai pas pu obtenir la carte de jeu au magasin à temps.

Dans le volet développeur du navigateur, je vois que la carte est dans le magasin.

Memoryscript commence par quelques messages de débogage :

<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'
        ]),

La sortie dans la console ressemble à :

at mounted show GameCards:

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

Quelqu'un peut-il voir comment je peux résoudre ce problème ?

Je ne veux pas obtenir les cartes dans le composant lui-même car je souhaite également utiliser les cartes de jeu dans d'autres composants au lieu de les récupérer à chaque fois depuis le backend.