Tatasusunan dalam storan vue tidak tersedia dalam komponen (dalam masa)

Question

Dalam aplikasi saya, saya mempunyai satu set kad permainan yang disimpan di kedai vuex.

Pemain mengisi pin permainan dan kod menyemaknya serta mendapatkan kad permainan untuk pin itu dan menyimpannya dalam storan dan membuka komponen memori:

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

Dalam komponen memori, kad diambil dan permainan bermula. Malangnya saya tidak dapat mendapatkan kad permainan dari kedai tepat pada masanya.

Dalam anak tetingkap pembangun penyemak imbas, saya nampak kad itu ada di dalam kedai.

Memoryscript bermula dengan beberapa mesej nyahpepijat:

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

Output dalam konsol kelihatan seperti:

at mounted show GameCards:

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

Bolehkah sesiapa melihat bagaimana saya boleh menyelesaikan masalah ini?

Saya tidak mahu mendapatkan kad dalam komponen itu sendiri kerana saya juga mahu menggunakan kad permainan dalam komponen lain dan bukannya mendapatkannya dari bahagian belakang setiap kali.

Answer 1

Jika ia tidak diisi semasa komponen dipasang gameCards 数组，您可以使用 观察者 在 gameCards jalankan fungsi anda apabila ia benar-benar sedia untuk digunakan

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()
      }
    }
  },

Pemerhati akan sentiasa berjalan apabila nilai tatasusunan baharu diperuntukkan, tetapi seperti yang ditunjukkan oleh contoh kod saya, anda boleh menggunakan logik berdasarkan nilai tatasusunan lama dan baharu yang dimasukkan untuk mengawal sama ada pemerhati benar-benar melakukan apa-apa.

Walaupun secara lalai pemerhati hanya berjalan pada pengagihan semula lengkap tatasusunan yang diperhatikan, anda boleh menggunakan pemerhati kedalaman jika anda perlu.