Array im Vue-Speicher ist in der Komponente nicht verfügbar (rechtzeitig)

Question

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.

Answer 1

如果在组件挂载时未填充 gameCards 数组，您可以使用 观察者 在 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()
      }
    }
  },

当分配新的数组值时，观察程序将始终运行，但正如我的代码示例所示，您可以使用基于传入的新旧数组值的逻辑来控制观察程序是否实际执行任何操作。

虽然默认情况下观察器仅在被观察数组的完全重新分配时运行，但您可以在使用 深度观察者（如果您需要的话）。