vue-query 返回 ObjectRefImpl 而不是数据答案

【问题标题】：vue-query return ObjectRefImpl and not the datavue-query 返回 ObjectRefImpl 而不是数据
【发布时间】：2021-09-23 23:19:38
【问题描述】：

vuejs 社区我是 vue.js 的新手，使用 vue-query、vue.js 3 和组合 API 获取数据，返回的数据是 ObjectRefImpl。当我打印值时它返回我：在渲染期间访问了属性“isLoading”，但未在实例上定义。非常感谢！

"vue": "^3.2.12", "vue-query": "^1.11.0"

Todo.vue

import {onMounted} from 'vue';

export default {
  setup() {
    const fetcher = async () => {
      await fetch('https://jsonplaceholder.typicode.com/todos').then(response =>
        response.json()
      );
    };

    onMounted(() => {
      const {data, isError, error, isLoading} = useQuery('todos', fetcher);
      console.log(data);
      return {isLoading, isError, data, error};
    });
  }
};

App.vue

<script>
import {defineComponent} from 'vue';
import {useQueryProvider} from 'vue-query';
import {VueQueryDevTools} from 'vue-query/devtools';

export default defineComponent({
  components: {VueQueryDevTools},
  name: 'App',
  setup() {
    useQueryProvider();
  }
});
</script>

<template>
  <VueQueryDevTools :initialIsOpen="true" />
  <router-view />
</template>

main.js

import {createApp} from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';


import './index.scss';

createApp(App)
  .use(store)
  .use(router)
  .mount('#app');

【问题讨论】：

标签： javascript vue.js vuejs3 fetch-api vue-composition-api

【解决方案1】：

如果你稍微修改一下你的组件，你应该让它工作。

const fetcher = async () => {
    await fetch('https://jsonplaceholder.typicode.com/todos').then(response =>
      response.json()
    );
  };

export default {
  setup() {
    const {data, isError, error, isLoading} = useQuery('todos', fetcher);
    console.log(data.value);
    return {isLoading, isError, data, error};
  }
};

vue-query 返回的所有值都是 refs，所以你必须通过访问 .value 来访问它们。这是由于 Vue 反应性系统，这是必要的，因此您可以自动更新这些值。

您还需要将您的useQuery 电话直接发送到setup。它们将在必要时运行和更新，无需您采取任何行动。

您在此链接后有一个工作示例：https://github.com/DamianOsipiuk/vue-query/tree/main/examples/simple

【讨论】：