pinia - 为 antdv 表格添加加载状态

前言

我们之前制作的 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();
  })
}

测试

动图就不放了，各位看官心领神会