Can I define axios as a functional component in Vue 3 - similar to Vue2 mixins

@martinbean ok I think what I mean is, can I put my API calls into a Functional Component? And how?

@boyjarv No. Why are you trying to? Functional components have no state or logic. And a component that’s doing network calls clearly does have state and logic.

@martinbean I mean composables

@boyjarv Yes, you can put that into composable.

There's even a package for that: https://www.npmjs.com/package/@vue-composable/axios

@boyjarv Why? What exactly are you trying to make “composable”? Axios is a library. You use it to accomplish tasks (specific network requests). It isn’t something that really lends itself to being “composable” because you already use it how you need to when creating and executing your network calls.

@martinbean Mostly, I agree. I haven't made into composable before.

However, sometimes it has a really good benefit.

Take this as an example

const { data, loading, exec, error, status } = useAxios();

It's much cleaner and that logic can be used everywhere.

@MohamedTammam I read that, I have no idea how I’m supposed to use that to make a HTTP request.

@martinbean Full component example

<template>
  <div>
    <p>current Id {{ id }}</p>
    <p>
      <button @click="id--">prev</button>
      <button @click="id++">next</button>
    </p>
    <p v-if="loading">loading...</p>
    <div v-else>
      <p>Status: {{ status }}</p>
      {{ data }}
    </div>
  </div>
</template>

<script>
import { ref, watch } from "@vue/composition-api";
import { useAxios } from "@vue-composable/axios";

export default {
  name: "axios-example",
  setup() {
    const id = ref(1);
    const { data, loading, exec, error, status } = useAxios();

    watch(id, id => {
      exec({
        method: "GET",
        url: "https://reqres.in/api/user/" + id
      });
    });

    return {
      id,
      data,
      loading,
      status
    };
  }
};
</script>

@MohamedTammam It still doesn’t really make sense to be honest.

What is the advantage of using exec({}) over just making an Axios call? You’re still passing a URL, and any request data, to that exec call.

@martinbean To make it reusable. Now you have loading, error and status variable which require a boilerplate code that keep repeating.

@boyjarv

Maybe you are thinking of something like this ? https://robsontenorio.github.io/vue-api-query/

You define some models on your vue application and those will use axios under the hood. You do need to build the api in a certain in order to work but it can help tucking away all those calls.