Tableau dans le stockage vue non disponible dans le composant (dans le temps)

Question

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.

Answer 1

S'il n'est pas renseigné lorsque le composant est monté, exécutez votre fonction lorsqu'elle est réellement prête à être utiliséegameCards 数组，您可以使用 观察者 在 gameCards

watch: {
    // whenever gameCards is assigned a new value, this function will run
    gameCards(newValue, oldValue) {
      // only do this after first assignment (when gameCards is initially empty)
      if(oldValue.length === 0) {
        this.createDeck()
        this.createShowCards()
      }
    }
  },

L'observateur s'exécutera toujours lorsqu'une nouvelle valeur de tableau est allouée, mais comme le montre mon exemple de code, vous pouvez utiliser une logique basée sur les anciennes et les nouvelles valeurs de tableau transmises pour contrôler si l'observateur fait réellement quelque chose.

Bien que par défaut les observateurs ne fonctionnent que sur une réallocation complète du tableau observé, vous pouvez utiliser un

observateur de profondeur si vous en avez besoin.