vue-Query 报错解决/异常问题

1. useQuery 时候查询失败，页面报错

Uncaught Error: No 'queryClient' found in Vue context, use 'VueQueryPlugin' to properly initialize the library.

• 解决方法

// 在 main.js 引入 VueQueryPlugin

app.use(ElementPlus)
app.use(VueQueryPlugin)
app.mount('#app')

• 错误案例

// 注意需要在 mount("#app") 之前

// 这样不行
app.use(ElementPlus)
app.mount('#app')
app.use(VueQueryPlugin)

useMutation isPending status 状态不共享

1. 父组件显示 count, 子组件 有一个按钮让 count +1, 将useMutation 中的 isPending 进行显示，始终为false，查看status，也一直是 idle
2. 分析可能是由于触发的地方才更新相应的数据，导致 父组件点击按钮，父组件的status更新，子组件点击按钮，子组件的status更新，两者并不共享
3. 而useQuery 的isFetching状态却可以共享

• hooks

import {useMutation, useQuery, useQueryClient} from '@tanstack/vue-query'
import {get, update} from "@/demos/hookRemote/apis";

export const useCount = () => {
    const queryClient = useQueryClient()
    const {mutate,status}= useMutation({
        mutationKey: ["addCount"],
        mutationFn: () => update(),
        onSuccess: () => {
            queryClient.invalidateQueries({queryKey: ["get"]})
        }
    })

    const { data, isFetching } = useQuery({
        queryKey: ["get"],
        queryFn: async() => {
            const data = await get();
            return data.data.count;
        }
    })
    return {data, isFetching, status, mutate}
}

• 父组件

<template>
  <div>父组件:
    <span>{{ data }}</span>
    <div>{{isFetching ? "获取中" : "获取成功"}}</div>
    <div>{{status}}</div>
    <div @click="mutate"><button>父组件添加</button></div>
  </div>
  <hr/>
  <HookDemo2></HookDemo2>
</template>
<script setup>

import HookDemo2 from "@/demos/hookRemote/hookDemo2.vue";
import {useCount} from "@/demos/hookRemote/hooks";
const {data, isFetching, status, mutate} = useCount();
</script>

• 子组件

<template>
  <div>子组件:
    <span>{{ data }}</span>
    <div>{{isFetching ? "获取中" : "获取成功"}}</div>
    <div>{{status}}</div>
    <div @click="mutate"><button>子组件添加</button></div>
  </div>
</template>
<script setup>
import {useCount} from "@/demos/hookRemote/hooks";
const {data,isFetching,status,mutate} = useCount();
</script>