Gibt es bei vuex dispatch eine Verhaltensweise, die von einer Komponente aus aufgerufen wird?

Question

Ich lerne vuex und habe dieses Problem, auf erstellt() Ich möchte Daten von der API abrufen und dann, wenn es fertig ist, möchte ich Getter von der Komponente aufrufen und Getter-Karten zu Komponenten-Karten zuweisen. Ich habe einen Kommentar in created() hinzugefügt, damit Sie sehen können, was ich bekommen möchte. Gibt es eine Art "Versprechen" beim Versand? etwas tun, nachdem es fertig ist. Danke im Voraus. Ich füge einen Screenshot des Codes an.

Komponente:

<template> 

    <div class="container" :class="{'is-loading': isLoading}"> 
     <h1>All Cards</h1> 
     <hr> 
     <section class="columns"> 
      <app-card :card="card" v-for="card in cards" key="asdasd" /> 

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


<script> 
import axios from 'axios' 
import AppCard from './AppCard' 

export default { 
    name: 'AppCards', 
    components: { 
    AppCard 
    }, 
    data() { 
    return { 
     isLoading: true, 
     endpoint: `/cards.json`, 
     cards: [] 
    } 
    }, 

    created() { 
    this.$store.dispatch('fetchAllCards', this.endpoint) 
     // then(() => { 
     // this.cards = this.$store.getters.allCards (I want to get cards once action/mutation did its job and assign to this component's cards) 
     // }) 

    } 
} 
</script> 

Vuex:

import Vue from 'vue' 
import Vuex from 'vuex' 
import router from '@/router' 
import axios from 'axios' 

Vue.use(Vuex) 


const state = { 
    cards: null 
} 


const mutations = { 
    storeCards(state, fetchedCards) { 
     state.cards = fetchedCards 
    } 
} 


const actions = { 
    fetchAllCards({commit, state}, payload) { 

     axios.get(payload) 
      .then(response => { 
      const data = response.data 
      const cards = [] 

      for(let key in data) { 
       if(data[key] !== null) { 
       const card = data[key] 
       card.id = key 
       cards.push(card) 
       } 
      } 

      commit('storeCards', cards) 

      }) 
      .catch(e => { 
      console.log(e) 
      }) 

    } 
} 


const getters = { 
    allCards(state) { 
     return state.cards 
    } 
} 


export default new Vuex.Store({ 
    state, 
    mutations, 
    actions, 
    getters 
}) 

Answer 1

In der Zwischenzeit habe ich meine Antwort auf Vues Chat, so falls jemand zu diesem Thema Bumps, hier ist die Antwort dazu

modifizierte Aktion innerhalb Speicher:

const actions = { 
    fetchAllCards({ commit }, payload) { 
    // return is here so we can use than inside comp (returns a promise) 
    return axios.get(payload).then(({ data }) => { 
    const cards = []; 
    for(let key in data) { 
     if(data[key] !== null) { 
     const card = data[key] 
     card.id = key 
     cards.push(card) 
     } 
    } 
    commit('storeCards', cards) 
    }) 
} 

Modified() erstellt und berechnet für Elemente innerhalb Komponente bekommen:

computed: { 
    cards() { 
    return this.$store.getters.allCards 
    } 
}, 


created() { 
    this.$store.dispatch('fetchAllCards', this.endpoint) .then(() => { 
    this.isLoading = false 
    }) 
}