如何在 Vue 3 中的组件中多次挂钩

Question

我在一节课中看到我们可以使用组合 api 挂钩 usePromise 创建，但问题是我有一个带有待办事项列表的简单 crud 应用程序，我在其中创建、删除、获取 API 调用，但我不明白我是如何可以将此钩子用于一个组件中的所有 api。所有调用都正确，但加载不正确，它仅在第一次调用 PostService.getAll() 时才起作用，然后加载程序没有被触发。感谢您的回复。

usePromise.js

import { ref } from 'vue';

export default function usePromise(fn) {
    const results = ref(null);
    const error = ref(null);
    const loading = ref(false);

    const createPromise = async (...args) => {
        loading.value = true;
        error.value = null;
        results.value = null;

        try {
            results.value = await fn(...args);
        } catch (err) {
            error.value = err;
        } finally {
            loading.value = false;
        }
    };

    return { results, loading, error, createPromise };
}

apiClient.js

import axios from 'axios';

export default axios.create({
    baseURL: 'https://jsonplaceholder.typicode.com/',
    withCredentials: false,
    headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
    },
});

PostService.js

import apiClient from './apiClient';
const urlPath = '/posts';

export default {
    getAll() {
        return apiClient.get(urlPath);
    },

    add(post) {
        return apiClient.post(urlPath, post);
    },

    delete(id) {
        return apiClient.delete(`${urlPath}/${id}`);
    },
};

List.vue

<template>
    <div>
        <VLoader v-if="loading" />
        <template v-else>
            <table class="table">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Title</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="post in posts" :key="post.id">
                        <td>{{ post.id }}</td>
                        <td>{{ post.title }}</td>
                        <td>
                            <button class="btn btn-danger ml-1" @click="deletePost(post.id)">Delete</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </template>
    </div>
</template>

<script>
import { ref, computed, watch, unref } from 'vue';
import PostService from '@/services/PostService';
import usePromise from '@/use/usePromise';

export default {
    setup() {
        const posts = ref([]);
        const post = ref({
            title: '',
            body: '',
        });

        const {
            results: postsResultRef,
            loading: postsLoadingRef,
            createPromise: getAllPosts,
        } = usePromise(() => PostService.getAll());
        
        getAllPosts(); //get all posts by initialize component

        const {
            results: postDeleteResultRef,
            loading: postDeleteLoadingRef,
            createPromise: deletePost,
        } = usePromise((id) => PostService.delete(id).then((result) => ({ ...result, removedId: id })));

        watch(postsResultRef, (postsResult) => {
            posts.value = postsResult.data;
        });

        watch(postDeleteResultRef, (postDeleteResult) => {
        if (postDeleteResult.status === 200) {
            posts.value = posts.value.filter((item) => item.id != postDeleteResult.removeId);
            // unref(posts).splice(/* remove postDeleteResult.removedId */);
        }
    });

        const loading = computed(() => [postsLoadingRef, postDeleteLoadingRef].map(unref).some(Boolean));

        return { posts, post, loading };
    },
};
</script>

Answer 1

一个 ref 保持对一个应该存在于整个组件生命周期中的值的反应性引用。它在组件的其他地方保持响应 - 模板、计算属性、观察者等。

usePromise 之类的钩子应该设置在 setup 函数内部（因此得名）：

const { results, loading, createPromise } = usePromise(() => PostService.getAll()

对于多个请求，可以组合多个hook结果：

const posts = ref([]);

const { results: postsResultRef, loading: postsLoadingRef, createPromise: getAllPosts } = usePromise(() =>
  PostService.getAll()
);

const { results: postDeleteResultRef, loading: postDeleteLoadingRef, createPromise: deletePost } = usePromise(id =>
  PostService.delete(id).then(result => ({...result, removedId: id }))
);

...

watch(postsResultRef, postsResult => {
  posts.value = postsResult.data
});

watch(postDeleteResultRef, postDeleteResult => {
  if (postDeleteResult.status === 200)
    unref(posts).splice(/* remove postDeleteResult.removedId */)
});

...

const loading = computed(() => [postsLoadingRef, postDeleteLoadingRef, ...].map(unref).some(Boolean))

getAllPosts 等应该用作回调，例如在模板中，它返回的承诺通常不需要显式处理和链接，因为它的当前状态已经反映在钩子结果中。这表明钩子中存在潜在缺陷，因为createPromise 参数在结果可用时是未知的，这需要为删除结果显式提供参数。

Answer 2

问题只是第一个loading ref 是从setup() 返回的。其他的在每个方法中是隐藏和未使用的。

一种解决方案是跟踪state 中的活动loading ref，从setup() 返回：

1. 声明state.loading。

   export default {
     setup() {
       const state = reactive({
         //...
         loading: null,
       })
   
       //...
     }
   }
   

2. 将state.loading 设置为每个方法中的loading 引用。

   const fetchPosts = () => {
     const { results, loading, createPromise } = usePromise(/*...*/)
     state.loading = loading
     //...
   }
   
   const deletePost = (id) => {
     const { results, loading, createPromise } = usePromise(/*...*/)
     state.loading = loading;
     //...
   }
   
   const onSubmit = () => {
     const { results, loading, createPromise } = usePromise(/*...*/)
     state.loading = loading
     //...
   }
   

3. 删除最初从setup() 返回的loading ref，因为我们已经有state.loading，而toRefs(state) 将把loading 暴露给模板：

   export default {
     setup() {
       //...
   
       //return { toRefs(state), loading }
       //                        ^^^^^^^
       return { toRefs(state) }
     }
   }
   

demo