use-api-usage.js

// Imported from something like api/handlers.js

function Users() {
 const response = axios('/api/users');
 return normalizeUsersReponse(response);
}

export default defineComponent({
  setup() {
   const { data, error, isLoading, run: getUsers } = useApi(Users);
   return { data, error, isLoading, getUsers }; 
  }
});



 

use-api.js

export function useApi(cb = () => {}) {
  const store = useStore();
  
  const getterName = cb.name;
  const hasGetterName = `has${cb.name}`;
  const setterName = `set${cb.name}`;
  
    const { data, error, isLoading, run } = useAsync(async () => {
      if (store.getters[hasGetterName]) {
        return store.getters[getterName];
      }
      
      const data = cb();
      
      store.commit(setterName, data);
      return data;
    });
  
    return { data, error, isLoading, run };
}