What is the right way to make this function available to export in vue 3?

        getAuthUserCart(userId) {
            axios.get(route("cart.get", userId)).then((res) => {
                this.cartAmount = res.data;
            });
        },

When I use this function in one of my vue components it works correctly, but once I tried to make this function sharable for others components I could get the res correctly

Here is how I rewtire the fn for export

export function getAuthUserCart(userId) {
    axios.get(route("cart.get", userId)).then((res) => {
        return res.data
    });
}

But when I'm triying to use it in the same component it was earlier I can get the res.data that i'm trying to return

import { getAuthUserCart } from "./GetUserCart";

....

    mounted() {
        if (this.$page.props.auth.user.autorized) {
            this.cartAmount = this.getAuthUserCart(
                this.$page.props.auth.user.id
            ); // here I get only undefined
    },

vincent15000

3 years ago

Level 63

You say that you always retieve the right data, so what is the problem ?

If you need to share this function, you could write it in a service.

https://laracasts.com/discuss/channels/vue/vue-add-a-service-to-the-app-or-component

mikeoliver

3 years ago

Level 23

I assume you mean as a composable? You would put it in a ts or js file: e.g. authFunctions.js

export function useAuth() {
    const getAuthUserCart(userId) {
        axios.get(route("cart.get", userId)).then((res) => {
            this.cartAmount = res.data;
        });
    }
    return {
		getAuthUserCart
    }
}

You would then import the composable in a component:

<script setup>
import { useAuth } from '@/[location_of_composables]/authFunctions'
const { getAuthUserCart } = useAuth()
</script>

the function will then be available in the component

Please or to participate in this conversation.