0

I am experimenting with Vue3's Composition API in a Laravel/VueJS/InertiaJS stack.

A practice that I have used a lot in Vue2 with this stack is to have 1 route that returns the Vue page component (eg. Invoices.vue) and then in the created() callback, I would trigger an axios call to an additional endpoint to fetch the actual data.

I am now trying to replicate a similar approach in Vue3 with composition API like so

export default {
    components: {Loader, PageBase},
    props: {
        fetch_url: {
            required: true,
            type: String,
        }
    },
    setup(props) {
        const loading = ref(false)
        const state = reactive({
            invoices: getInvoices(),
            selectedInvoices: [],
        });

        async function getInvoices() {
            loading.value = true;
            return await axios.get(props.fetch_url).then(response => {
                return response.data.data;
            }).finally(() => {
                loading.value = false;
            })
        }

        function handleSelectionChange(selection) {
            state.selectedInvoices = selection;
        }

        return {
            loading,
            state,
            handleSelectionChange,
        }
    }
}

This however keeps on giving me the propise, rather than the actual data that is returned.

Changing it like so does work:

export default {
    components: {Loader, PageBase},
    props: {
        fetch_url: {
            required: true,
            type: String,
        }
    },
    setup(props) {
        const loading = ref(false)
        const state = reactive({
            invoices: [],
            selectedInvoices: [],
        });

        axios.get(props.fetch_url).then(response => {
            state.invoices = response.data.data;
        }).finally(() => {
            loading.value = false;
        })

        function handleSelectionChange(selection) {
            state.selectedInvoices = selection;
        }

        return {
            loading,
            state,
            handleSelectionChange,
        }
    }
}

I want to use function though, so I can re-use it for filtering etc.

Very curious to read how others are doing this. I have been googling about it a bit, but cant seem to find relevant docu.

All feedback is highly welcomed.

1 Answer 1

0

I tried this now with async setup() and await getInvoices() and <Suspense> but it never displayed any content.

So this is how I'd do it, except I wouldn't and I'd use vuex and vuex-orm to store the invoices and fetch the state from the store.

<template>
  <div>loading:{{ loading }}</div>
  <div>state:{{ state }}</div>
</template>

<script>
import {defineComponent, ref, reactive} from "vue";
import axios from "axios";

export default defineComponent({
  name: 'HelloWorld',
  props: {
    fetch_url: {
      required: true,
      type: String,
    }
  },
  setup(props) {
    const loading = ref(false)
    const state = reactive({
      invoices: []
    })

    async function getInvoices() {
      loading.value = true;
      await axios.get(props.fetch_url).then(response => {
        state.invoices = response.data;
      }).finally(() => {
        loading.value = false;
      })
    }

    return {
      getInvoices,
      loading,
      state,
    }
  },
  async created() {
    await this.getInvoices()
  }
})
</script>

<style scoped>
</style>

This is of course similar to what you're doing in option 2.

4
  • Would you mind sharing how you would do this with Vuex? Since i have no experience using it, i would love to see that in action!
    – Guardian
    Nov 28, 2021 at 18:36
  • I might write a blog post about it, but the documentation is good and it's pretty straightforward. vuex-orm.org and especially vuex-orm.github.io/plugin-axios . It's an a bit larger chunk as you need to define your data models and setup the vuex-orm "database". Try reading the docs and playing around, it really isn't all that dreadful, but a lot to write about, and later you just copy/paste for the most part. The advantage is, you have a single source of truth and once you read data from the server you don't have to read it again, if you don't need to.
    – user17408941
    Nov 28, 2021 at 20:01
  • 1
    @Guardian since you're using Vue3, next.vuex.vuejs.org for vuex. It's also straightforward, but I'm in the middle of something right now and just saw the notification about a comment. vuex + vuex-orm + vuex-orm-plugin-axios . It took me about a day to figure out. I'll get back to this eventually.
    – user17408941
    Nov 28, 2021 at 20:04
  • Fair enough, im gonna give it a go! Thanks a million!
    – Guardian
    Nov 29, 2021 at 7:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.