某些场景下建议vue query代替pinia原理解析

// 根文件
const pinina = createPinia();
app.use(pinia);

const useStore = defineStore('main', {
  state: () => ({
    user: null,
  }),
  actions: {
    async getUser() {
      try {
        const user = await axios.get("/api/user");
        this.user = user;
      } catch(err) {
       //
      }
    },
    async updateUser(data) {
      try {
        const res = await axios.post("/api/user", data);
        // do something
        // this.user = res;
      } catch(err) {
       //
      }
    }
  },
})

<script setup>
const getUserLoading = ref(false);
const updateUserLoading = ref(false);
// 获取用户信息
onMounted(async() => {
  getUserLoading.value = true;
  await store.getUser();
  getUserLoading.value = false;
})
// 修改用户信息
const updateUser = async () => {
  updateUserLoading.value = true;
  await store.updateUser({ username: "123" })
  updateUserLoading.value = false;
}
</script>

// 根文件
app.use(VueQueryPlugin)

// 新建一个文件 useUserQuery.js。需要必传两个值，queryKey 是缓存数据需要的唯一值，是个数组，我的习惯是直接用 api 地址。queryFn 是请求的方法。
// useUserQuery.js
const api = "/api/user";
export const useUserQuery = (props) => useQuery({ queryKey: [api], queryFn: () => axios.get(api), ...props });
// 新建一个文件 useUserMutation.js，因为是修改数据，并没有缓存这个概念，所以不需要唯一值，只需要传入请求方法即可。
// useUserMutation.js
const api = "/api/user";
export const useUserMutation = (props) => useMutation({ mutationFn: (data) => axios.post(api, data), ...props });

<script setup>
// 获取用户信息
const { data, isLoading } = useUserQuery({
  onSuccess: (data) => { 
    // 成功回调
  },
  onError: (error) => {
    // 可以配置全局 onError 错误处理，这里不做介绍
  },
});
const { isLoading, mutate } = useUserMutation();
// 修改用户信息
const updateUser = () => {
  mutate({ username: "123" })
}
</script>

const queryClient = useQueryClient();
const data = queryClient.getQueryData(["/api/user"])