前言

我們之前制作的 Vue3 + AntDesign Vue + SpringBoot 的增刪改查小 Demo 的功能已經全部實現了，但是還是有一點不完美，在發送請求到后端返回數據這一段時間內前臺未做任何響應。不過以我們現在的數據量和網速來說問題不大，請求時間最長也不過幾百毫秒，不會影響日常使用體驗。不過在網絡環境不太好或者數據量很大的情況下則會給用戶帶來非常糟糕的體驗，其在點擊按鈕到數據返回到瀏覽器這一段時間內無法知道自己是否向服務器發起了請求，以及當前頁面是否是可操作的。如果用戶在點擊按鈕后發現頁面沒有響應，則有可能對當前頁面進行操作，那么數據有可能在用戶操作頁面的過程中被瀏覽器接收從而導致用戶操作的丟失，也可能發生其他的未知錯誤。

大部分用戶在點擊了刷新按鈕而頁面沒有發生變化時會選擇重復點擊按鈕，而我們要在瀏覽器承購接收到數據之前對頁面做點什么，例如將按鈕的狀態設置為 disable，或者為 table 設置一個 loading 的狀態，因為之前做的小 Demo 沒有刷新按鈕，則采用后者來提升用戶體驗。

為了模擬網絡較差環境下的用戶體驗，我們采用瀏覽器的 網速限制 功能來將網絡切換至 3G

• 打開瀏覽器 -> f12 進入控制臺 -> 選擇 「性能」

  • Chrome
    

  • Edge
    

  • FireFox

    f12 控制臺 -> 網絡

    

Pinia

也借此機會引入一個 Vue3 的狀態管理工具： pinia

它類似與 Vuex，用法和功能也都大相徑庭

安裝與引入：

• 安裝：
  npm install pinia

• 在 main.ts 中注冊：

  import { createPinia } from "pinia";
  
  const pinia = createPinia();
  createApp(App).use(pinia).mount('#app')
  

新建 src/store/mainStore.ts：

import { defineStore } from 'pinia'
import {ref} from "vue";


// 第一個參數是應用程序中 store 的唯一 id
export const useMainStore = defineStore('main', () => {
    const tableLoading = ref(true);
    // ↑ 定義一個表格加載狀態， true 為正在加載

    // ↓ 兩個方法，改變表格加載狀態
    function tableLoading2true() {
        tableLoading.value = true;
    }
    function tableLoading2false() {
        tableLoading.value = false;
        console.log(tableLoading.value);
    }

    return {
        tableLoading,
        tableLoading2true,
        tableLoading2false,
    }
})

在頁面中注冊

• script

  const mainStore = useMainStore();
  

• template

<a-table
  ...
  :loading="mainStore.tableLoading"
>

由于我們之前在 mainStore.ts 中設置了 tableLoading 的值為 true，所以無論在何時 table 的狀態都會是 loading

完善接口

我們現在已經可以使用 pinia 來控制全局變量的狀態，但是總不能每次改變 table 的 loading 狀態時都手動切換。還記得之前在定義 mainStore.ts 中我們在 defineStore 內添加了兩個方法么？可以使用它們來操控數據的狀態。

我們要做的是：在點擊按鈕（查找/翻頁）或者點擊刷新的瞬間，也就是發起請求的時候 讓 tableLoading 的值為 true，后端返回結果后將值變為 false。

明確了需求，接下來 完善代碼：

由于我們所有的接口請求都放在了 src/api/fruitApi.ts 內，只需要在在內部請求請求的方法里添加相關代碼即可。

import {useMainStore} from "@/store/mainStore";

// 引入 store
const mainStore = useMainStore();

export function getFruitRequest(...) {
  ...
  mainStore.tableLoading2true();
  axios({
    ...
  })
  .finally(() => {
    ...
    mainStore.tableLoading2false();
  })
}

測試

動圖就不放了，各位看官心領神會 ??