Vue 3 / Pinia: how to handle error, loading and data properly - vue.js

Question

Using Fetch, and not axios, I wanna receive data in my components like that:
const userStore = useAuthStore();
const { user, error, loading } = storeToRefs(userStore);
userStore.getMe();
But I don't know how to do that.
I want that to have directly the error, data and loading state in one line because I think it's better.
But I don't wanna declare a loading like this in the store:
export const useAuthStore = defineStore({
id: "auth",
state: () => ({
user: {} as User,
loading: false,
}),
Because if I call another method related to this store (User), it will be the same Loading state. So this loading state (even the error state) will be in conflict.
If I would use Javascript and no Typescript, I would definetly replace this.user like this when fetching or when error (in the store):
async getMe() {
this.user = { loading: true };
try {
return await AuthService.getMe();
} catch (error) {
if (error) {
his.user = { error };
}
}
},
Because it's TypeScript, I can't replace the "user" state like that as I have set an Interface.
All I want, is to return a Data, Erros, Loading related to an unique action (not related to a state).
auth store:
import { defineStore } from "pinia";
import AuthService from "#/api/modules/auth";
interface User {
email: string;
first_name: string;
last_name: string;
force_password_change: boolean;
groups: string[];
has_2fa_enabled: boolean;
is_staff: boolean;
lang: string;
last_password_change: string;
permissions: string[];
session_expiry_date: string;
uid: string;
}
export const useAuthStore = defineStore({
id: "auth",
state: () => ({
user: {} as User,
loading: false,
}),
actions: {
async getMe() {
// this.user = { loading: true };
try {
return await AuthService.getMe();
} catch (error) {
if (error) {
// this.user = { error };
}
}
},
},
});
service:
import { Api } from "../apiSettings";
class AuthService {
async getMe(): Promise<any> {
return await Api.get("api/auth/me/");
}
}
export default new AuthService();
App.vue:
<script setup lang="ts">
import { useAuthStore } from "#/stores";
import { storeToRefs } from "pinia";
const userStore = useAuthStore();
const { user } = storeToRefs(userStore);
userStore.getMe();
console.log(user.value);
</script>

Answer 1

You can define a separate object for loading and error states and return it from the store's action along with the actual data. You can then use object destructuring to extract the loading, error, and data states in your component. Here's an example:
Auth store:
import { defineStore } from "pinia";
import AuthService from "#/api/modules/auth";
interface RequestState {
loading: boolean;
error: Error | null;
}
export const useAuthStore = defineStore({
id: "auth",
state: () => ({
user: {} as User,
}),
actions: {
async getMe(): Promise<{ data: User; requestState: RequestState }> {
const requestState: RequestState = {
loading: true,
error: null,
};
try {
const data = await AuthService.getMe();
requestState.loading = false;
return { data, requestState };
} catch (error) {
requestState.loading = false;
requestState.error = error;
return { data: {} as User, requestState };
}
},
},
});
Component:
<script setup lang="ts">
import { useAuthStore } from "#/stores";
import { storeToRefs } from "pinia";
const userStore = useAuthStore();
const { user, requestState } = storeToRefs(userStore);
// Call the action to get user data
userStore.getMe();
console.log(user.value); // {} - initial value of user
console.log(requestState.value); // { loading: true, error: null }
// Use object destructuring to get the actual user data, loading and error states
const { data, loading, error } = requestState.value;
if (loading) {
// Render a loading state
} else if (error) {
// Render an error state
} else {
// Render the user data
console.log(data);
}
</script>