1. How does it work?

Axios has been configured in the file: src/utils/axios.ts, and mock API responses are set up in src/_mockApis/mockAdapter.ts

To use Axios on a page, you need to import it and make a call. After that, you need to make calls to Axios using axios.get('path') or axios.post('path') see below implementation.

                                
// src/stores/apps/chat.ts
import axios from '@/utils/axios';  // 1. import axios
import { defineStore } from 'pinia';

export const useChatStore = defineStore('chat', {
    state: () => ({
        chats: [],
        chatContent: 1
    }),
    actions: {
        async fetchChats() {
            const data = await axios.get('/api/data/chat/ChatData'); // 2. call to fetch data
            this.chats = data.data; // 3. store data into state
        },
        SelectChat(itemID: number) {
            this.chatContent = itemID;
        }
    }
});

// src/views/apps/chat/Chats.vue
import { useChatStore } from '@/stores/apps/chat';
const store = useChatStore();

onMounted(() => {
  store.fetchChats(); // 2. call to fetch data
});

const getChats = computed(() => {
  return store.chats;
});  // 3. store data into single const
  

// use data in HTML
<v-list-item
    :value="chat.id"
    color="primary"
    class="text-no-wrap chatItem"
    v-for="chat in filteredChats"
    :key="chat.id"
    lines="two"
    :active="store.chatContent === chat.id"
    @click="store.SelectChat(chat.id)"
>
  ...
</v-list-item>