Async Vuex problemen..

[RoelZ]

Voor een eigen project probeer ik de data in mijn store van Vuex te tonen in een component.
Deze eenvoudige denkwijze lijkt niet op te gaan wanneer de state muteer via een async action.

Nou hoop ik dat iemand snel de doorn weet te vinden.
Om alles wat leesbaarder te maken deel ik even een gestripte versie van mijn code.

JavaScript:

state: {
resume: []
},

mutations: {
  SET_RESUME_DATA (state, payload) {
    state.resume = [...payload]
  },
}

actions: {
  async setResume ({ commit }, id){
    const response = await axios.get("api/cv");
    const currentResume = response.data.find((resume) => { return resume.id === id });
    commit('SET_RESUME_DATA', currentResume)
  }
}

getters: {
  showCurrentResume (state) {
    return state.resume
  }
}

Bij het laden van een parent component stuur ik een dispatch.

JavaScript:

created() {
  this.$store.dispatch("setResume", this.cvid );
}

Ik probeer vervolgens de store te raadplegen in een child component

JavaScript:

<template>
  <pre>{{currentResume}}</pre>
</template>

<script>
export default {
  computed: {
    ...mapGetters({ currentResume: 'showCurrentResume'})
  }
}
</script>

Ik zie dus dat de store wordt geupdate (door elke stap te loggen)
Maar dat mijn resume.vue eerder opgebouwd is waardoor hij "te vroeg" is met het uitpoepen van de store.state

Echter dacht ik te begrijpen dat het reactive was (wat ik ook zie), maar het blijft een lege Array.

Ik heb het ook geprobeerd met, wat mij ook geen ander resultaat geeft

getCurrentResume(){
      return this.$store.getters.showCurrentResume
    }

Ik hoop dat iemand hier direct ziet welke domme fout ik maak...
Alvast daarvoor enorme dank!

[OverloadOfRed]

Gebruik je de spread op de mutation wel goed? Ik gebruik zelf Vuex alleen met Typescript en wat meer 'basic' code zonder spread operators, maar als ik zo snel google gaat die mutation niet goed.

Probeer eens de state direct te zetten met de inhoud van je payload, zoiets:

JavaScript:

mutations: {
  SET_RESUME_DATA ({ state }, payload) {
    state.resume = [ payload ];
  },
}

[RoelZ]

OverloadOfRed schreef op woensdag 23 december 2020 @ 21:24:
Gebruik je de spread op de mutation wel goed? Ik gebruik zelf Vuex alleen met Typescript en wat meer 'basic' code zonder spread operators, maar als ik zo snel google gaat die mutation niet goed.

Probeer eens de state direct te zetten met de inhoud van je payload, zoiets:

JavaScript:

mutations: {
  SET_RESUME_DATA ({ state }, payload) {
    state.resume = [ payload ];
  },
}

Bedankt voor je vlotte antwoord.
Helaas had ik dit ook al geprobeerd, door bijv. state.resume.id = payload.id

Het is ook niet dat de state van de store niet gevuld wordt. Dit zie ik wel gebeuren.
Alleen is het hele async timing/opbouw bij mij verkeerd vrees ik. Maar ik krijg het maar niet goed uitgewerkt

[OverloadOfRed]

Hm. Dan zie ik niet zo gauw wat er fout gaat.
Wat heb je nog meer geprobeerd? Ik zou tenminste dit even nalopen:
- Checken of data überhaupt wel uit de store komt. Zet er eens default een string oid in en check of de value nog steeds een lege array is.
- Checken of de data wel doorkomt als je er een input met vmodel of :value='currentResume' van maakt
- Checken of de state wel wordt updated, met de vue browser plugin de state wel goed staat en wat er precies in het child component voor computed props worden berekend
- En misschien wel het belangrijkst: checken wat er in de action gebeurt. Gaan de promises wel goed, worden ze resolved, krijg je de data of wordt er een error gegooid die je niet ziet etc

[analogue]

Misschien vergezocht, maar onlangs was ik met iets dergelijks in aanraking gekomen en toen hielp het wanneer ik de dispatch in de beforeMount() van mijn component aanriep.

code:

      beforeMount() {
          this.$store.dispatch('getData')
      }

[Jacob de Keizer]

Het kan zijn dat de store reactivity verliest. Om reactivity the behouden moet je Vue.set gebruiken, zie: https://vuex.vuejs.org/gu...ow-vue-s-reactivity-rules

Je kunt de mutation dan veranderen naar:

code:

Vue.set(state, 'resume', payload)

Daarnaast kun je met de vue devtool bekijken of de mutations op je vuex store juist zijn.

[RoelZ]

Alemaal bedankt voor jullie antwoorden (en tijd)!

Omdat ik jullie feedback een-voor-een wilde nalopen (en evt. kon delen) had ik even een demo projectje opgezet. Omdat ik hier even alle overtollige dingen kon weg laten en de axios.get had vervangen voor een setTimeout Promise, raakte ik eigenlijk al de gevoelige snaar. Iets waar @OverloadOfRed me ook op wees.

Er ging blijkbaar iets mis met het doorsturen/muteren van de opgehaalde data.
Omdat de Promise van axios niet alleen de data terug geeft, maar ook alles van de request was de mapping naar mijn store.state.resume verkeerd.
Note de blokhaken [ currentResume ] !

actions

code:

async setResume ({ commit }, id){
   const response = await axios.get("api/cv");
   const currentResume = response.data.find((resume) => { return resume.resume_id === id });
   commit('SET_RESUME_DATA', [currentResume])
}

mutations

code:

SET_RESUME_DATA (state, payload) {
   state.resume = payload
},

Bovenstaande werkt dus!
En ik zag dus dat ik in mijn OP niet helemaal eerlijk ben geweest, ik had mijn mutation namelijk nog als volgt staan.. wat inderdaad de boosdoener was mbt het mappen.

code:

UPDATE_RESUME_DATA (state, payload) {
   state.resume.id = payload.data.resume_id
   state.resume.template_id = payload.data.resume_template_id
   state.resume.language = payload.data.resume_language
},

Enorm bedankt voor het mee denken!

[ Voor 5% gewijzigd door RoelZ op 24-12-2020 15:53 ]

[RoelZ]

Ook wil ik apart @analogue bedanken voor de heads-up.
Er ging namelijk nog wel iets verkeerd in mijn flow. Echter werk ik met Vue 3.

Ik heb het nu even nagelopen en heb van het onderstaande (wat nog helemaal verkeerd was)

code:

export default {
props: ['cvid'],
  created(){
    if(!isNaN(props.cvid)){
      store.dispatch("setResume", props.cvid );
    }
  }
}

dit gemaakt. Wat dus 100x beter is (en eigenlijk gewoon zo moet)!

code:

import { onBeforeMount } from 'vue'
import { useStore } from 'vuex'

export default {
props: ['cvid'],
  setup(props) {
    const store = useStore();
    onBeforeMount(() => {
      if(!isNaN(props.cvid)){
        store.dispatch("setResume", props.cvid );
      }
    })
  }
}

Thank you!