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[bot]]

welcome discuss in wechat:

[innocces]

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

useRef https://github.com/innocces/taro-hooks/blob/a124393bbae29ab6f153c404d84c923530a2b3a9/packages/plugin-vue/src/runtime/hooks.ts#L262

和

useMemo https://github.com/innocces/taro-hooks/blob/a124393bbae29ab6f153c404d84c923530a2b3a9/packages/plugin-vue/src/runtime/hooks.ts#L243 https://github.com/innocces/taro-hooks/blob/a124393bbae29ab6f153c404d84c923530a2b3a9/packages/use-request/src/useRequestImplement.ts#L81

(因为 instance 本身是一个 useMemo) https://github.com/innocces/taro-hooks/blob/a124393bbae29ab6f153c404d84c923530a2b3a9/packages/use-request/src/useRequestImplement.ts#L30

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

[skyclouds2001]

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