feat: vue 版本的 useRequest 的结果能否支持解构

[GreatAuk]

<template>
  <block>
    <view>{{request.loading}}</view>
    <view>{{request.data}}</view>
    <view>{{request.error}}</view>
  </block>
</template>
<script>
  export default {
    setup() {
      // 由于要保证request内部的变量不失活。 这里简单的可以将request直接抛出
      const request = useRequest(getUsername);

      return {
        request,
      };
    },
  };
</script>

如果 data 是一个对象，那么使用起来会比较的 ugly, request.data.obj.a
reqeust 目前是一个 reactive 对象，如果解构，那么就会失去响应式。能否把 request 定义成一个普通的对象，里面的 data loading 等值定义为 ref, 这样解构后，响应式依然存在。这样使用上也会和 react 版的一致。

Description

Solution

可以参考 @tanstack/vue-query 的 API

// 其中  isPending, isError, data, error 都是 ref 类型的值
const { isPending, isError, data, error } = useQuery({
  queryKey: ['todos'],
  queryFn: getTodos,
})

[github-actions]

welcome discuss in wechat:

[innocces]

这个是因为内部需要用同样的 like react hooks 去完成一部分 hooks 的 shims. 其中 vue.ver 的

useRef

taro-hooks/packages/plugin-vue/src/runtime/hooks.ts

Line 262 in a124393

const reactiveRef = reactive({ current: initialValue });

和

useMemo

taro-hooks/packages/plugin-vue/src/runtime/hooks.ts

Line 243 in a124393

return reactive(memoRef);

taro-hooks/packages/use-request/src/useRequestImplement.ts

Line 81 in a124393

const vueRefResult = useMemo(

(因为 instance 本身是一个 useMemo)

taro-hooks/packages/use-request/src/useRequestImplement.ts

Line 30 in a124393

const fetchInstance = useMemo(() => {

都使用了 reactive 的方式去设计的. 如果要改的话可能会涉及到其他 hooks 的回归。

[skyclouds2001]

可以自己用 toRefs() 把 reactive 对象转换成键值为 ref 的对象然后用解构赋值