Vue 3 Composition API icm Async calls en State Management

[RoelZ]

Ik loop al een dag vast op wat in mijn ogen niet zo moeilijk moet zijn. Maar elke resource die ik probeer te benaderen legt het maar uit tot een bepaalde hoogte.

Simpel gezegd wil ik data op halen in een parent component en die in een soort 'state' opslaan zodat ik deze in het parent en child componenten kan gebruiken.

Voorheen was Vuex hiervoor... nu nog steeds, maar blijkbaar is het delen van dit soort reactive data eenvoudiger via de Composition API (zo ik heb horen zeggen). Echter loop ik dus vast in de logica.


Parent component

JavaScript:

import { reactive, toRefs, onBeforeMount } from 'vue'
import usePromise from '../composable/usePromise';

export default {
  props: ['id'],
  setup() {
    const getData = reactive(usePromise());

    onBeforeMount(() => {
      getData.createPromise("api/endpoint")
    })
    return { ellipse, getData }
  },
  computed: {
    currentResume() {
      return this.getData.results.value.find((item) => { return item.item_id === this.id });
    },
  }
}

usePromise.js

JavaScript:

import { ref } from "vue"
import axios from 'axios'

export default function usePromise() {
  const loading = ref(false);
  const results = ref(null);
  const error = ref(null);
  const createPromise = async (...args) => {
    loading.value = true;
    error.value = null;
    results.value = null;
    try {
      results.value = await axios.get(...args, { headers: {'X-AUTH': localStorage.getItem('user-auth-key') }});
    } catch (err) {
      error.value = err;
    } finally {
      loading.value = false
    }
  };
  return { loading, results, error, createPromise }
}

1. Hoe kan ik het beste het resultaat van getData gebruiken in zowel de Parent als een Child component
2. Hoe kan ik het beste de computed property toepassen in het geval van deze Async call. (het liefste heb ik deze namelijk in de setup()

Ik hoop dat er iemand met wat meer ervaring is....

[OverloadOfRed]

Paar dingen:
- Wat is precies je bedoeling? Wil je met die 'usePromise' een soort vuex state maken? Als dat het geval is mis je namelijk nog wat dingen. In ieder geval de hint om de state ook reactive te maken en te kijken naar readonly om jezelf te forceren actions te maken. Zie bijvoorbeeld: https://vuejsdevelopers.com/2020/10/05/composition-api-vuex/
- Vraag 1 komt mij een beetje uit het niets. Wat heeft dit te maken met je vraag hier? Lijkt me namelijk een 'gewoon' vue ding om props uit te wisselen met slots, dat is in vue 3 ook nog te gebruiken.
- Vraag 2: Ik zou dit opsplitsen. In een hook (zoals bijv mounted of de beforeMount die je al gebruikt) de data ophalen uit de API via een fetch-achtige method en niet de 'get' method die je nu hebt.
- Verder vind ik de 'createPromise' nogal vaag maar dat kan aan mij liggen. Ik snap niet echt wat de bedoeling is van een createPromise als die geen promise returned of iets in die trend.
- Verder ben ik ook geen expert in best practices, maar ik kan me niet voorstellen dat je een async functie direct in je state wil zetten. Dat doe je nu op regel 13 van je state, een unresolved promise in je state lijkt mij _not_ done.

Succes!

[ElkeBxl]

Ik snap niet waarom je

code:

const getData = reactive(usePromise());

doet?

usePromise() returned al een aantal reactive dingen (omdat je ze wrapt in ref()) en reactive() maakt nog eens een reactive copy van zijn parameter.

Voor vraag 2: je kan gewoon computed() gebruiken in je setup() of je steekt die in je useX() functie om het overal beschikbaar te hebben.

Verder inderdaad de opmerkingen van @OverloadOfRed

Je kan ook eens kijken naar compositions die andere al gemaakt hebben, zo bestaan er al wrappers rond axios: https://vueuse.js.org/?path=/story/integrations--useaxios (want dat lijkt wat je probeert te maken). Heb je ze niet volledig nodig, kan kijken in hun implementatie wat inspiratie geven