vuex-store에서 vue child-component를 업데이트하려면 어떻게 해야 합니까?

vuex-store에서 vue child-component를 업데이트하려면 어떻게 해야 합니까?

내 앱은 플레이어가 이름과 암호를 입력할 수 있는 창을 보여준다.

플레이어가 존재하고 카드가 있으면 저도 카드를 보여주고 싶습니다.플레이어가 존재하면 카드를 보이게 합니다.그런 다음 'created'에서fetchSpelerCards를 호출합니다.성공했지만 VUE 콘솔에 보류 중으로 표시됨...

경험 많은 사용자가 이 글을 읽고 힌트, 참조 또는 설명을 해 주셨으면 합니다.

그 때문에, 다음의 코드로 하고 있습니다.

 <h2>Meld je aan</h2>
    <form @submit.prevent="register" class="mb-3"> 
        
        <div class="form-group">
            <input type="text" class="form-control m-2" placeholder="naam" v-model="name">
        </div>

        <div class="form-group">
            <input type="text" class="form-control m-2" placeholder="kies inlogcode" v-model="pass_code">     
        </div>

        <button type="submit" @click="checkSpeler()"  class="btn btn-primary btn-block" style="color:white">Save</button>
    </form>
    <p class="alert alert-danger" v-if="errorMessage !== ''"> {{errorMessage}} </p>
    <p class="alert alert-success" v-if="successMessage !== ''"> {{successMessage}} </p>
    <CardsSpeler v-if="spelerCorrect"></CardsSpeler>
    
</div>
</template>

컴포넌트는 다음과 같습니다.

 <h2>Cards 1</h2>
    <form @submit.prevent="addCard" class="mb-3"> 
        <div class="form-group">
            <input type="text" class="form-control" placeholder="title" v-model="card.title">
        </div>

        <div class="form-group">
            <textarea  class="form-control" placeholder="description" v-model="card.description">
            </textarea>
        </div>

        <div>
            <input type="file" v-on:change="onFileChange" ref="fileUpload" id="file_picture_input">
        </div>

        <button type="submit" class="btn btn-primary btn-block" style="color:white">Save</button>
    </form>
    <div class="card card-body mb-2" v-for="card in cards" v-bind:key="card.id">   
        <h3> {{currentSpelerCard.title}}   </h3>
        <p> {{currentSpelerCard.description}}</p>
        <img class="img-circle" style="width:150px" v-bind:src="currentSpelerCard.picture" alt="Card Image">


    </div>
</div>
</template>

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

export default {
    mounted(){
        console.log('component mounted');  
    },
    computed: {
        ...mapState([
        'currentSpeler' ,'currentSpelerCard'
        ]), 
    },
    data() {
        return{
            cardExists:false,
            successMessage:'',
            errorMessage:'',
        }

    },
    created(){
      this.fetchSpelerCards();
    },
    methods: {

        ...mapActions([  'getGames', 'addGame', 'fetchSpelerCards'  ]),

        fetchSpelerCards(){
            
                this.$store.dispatch('fetchSpelerCards', this.currentSpeler.speler.id )
                .then(res => { 
                    this.cardExists = true;
                    this.successMessage = res;
                    console.log(res);
                })
                .catch(err => {
                    this.errorMessage = err;
                    this.cardExists = false;
                });
            
        },

actions.js에서 대응하는 액션은 다음과 같습니다.

export const fetchSpelerCards = ({commit}, speler_id) => {
    return new Promise((resolve, reject) => {     
        let status = '';
        let data ={};
        fetch(`api/cardsBySpeler/${speler_id}`)
        .then(res => {
            status = res.status;
            data = res.json(); 
        })
        .then(res=>{
            if ( status === 200) {
                commit('SET_PLAYER_CARD', data);
                resolve('Kaart gevonden');
            }
            else {
                reject('Er is geen kaart beschikbaar')
            }
        });
    })
}

vuex-store에 표시되는 (크롬 브라우저의 VUE 애드온과 함께 표시):

currentSpelerCard: Promise

그러나 fetch 명령어 응답은 성공적이었고 카드가 꺼졌습니다.상태 200, 이름, 제목, 이미지 주소 등이 표시됩니다.

저는 약속이 최종적으로 해결되면 다음과 같은 이유로 스토어가 업데이트되고 카드를 사용할 수 있게 된다고 가정하고 있었습니다.

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

제가 뭘 잘못하고 있는지 누가 좀 설명해 주시겠어요?

fetchSpelerCardsVuex 커밋으로SET_PLAYER_CARD와 함께data, 이것은 보류중인 약속입니다.당신은 약속을 기다려야 합니다.

이 문제는 몇 가지 다른 방법으로 해결할 수 있습니다.

함수의 작성async그리고.await res.json()가장 쉬울 것 같아요.

...
  fetch(`api/cardsBySpeler/${speler_id}`)
    .then(async res => {
      status = res.status;
      data = await res.json(); 
    })
...

메서드의 이름을 변경하고 완료될 때까지 기다립니다.

async mounted(){
  await this.initSpelerCards();
},
methods: {
  ...mapActions([ 'getGames', 'addGame', 'fetchSpelerCards' ]),

  initSpelerCards(){
    this.fetchSpelerCards(this.currentSpeler.speler.id)
      .then(res => { 
        this.cardExists = true;
        this.successMessage = res;
        console.log(res);
      })
      .catch(err => {
        this.errorMessage = err;
        this.cardExists = false;
      });
  },
}

언급URL : https://stackoverflow.com/questions/69956617/how-can-i-update-a-vue-child-component-from-the-vuex-store