Блог

Главная - Вопросы по программированию - vue-запрос возвращает ObjectRefImpl, а не данные

vue-запрос возвращает ObjectRefImpl, а не данные

#javascript #vue.js #vuejs3 #fetch-api #vue-composition-api

Вопрос:

сообщество vuejs, в котором я новичок vue.js, для извлечения данных с помощью vue-запроса, vue.js 3 и API композиции, возвращаемые данные являются ObjectRefImpl. Когда я печатаю значения, он возвращает мне: свойство «isLoading» было доступно во время визуализации, но не определено в экземпляре. Огромное спасибо!

«vue»: «^3.2.12», «vue-запрос»: «^1.11.0»

Сегодня.вю

 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};
    });
  }
};

Приложение.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');

Ответ №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-запросом, являются ссылками, поэтому вы должны получить к ним доступ путем доступа .value . Это связано с системой реактивности Vue, и это необходимо, чтобы вы могли автоматически обновлять эти значения.

Также вам нужно совершать useQuery звонки непосредственно в setup . Они будут запускаться и обновляться по мере необходимости без каких-либо действий с вашей стороны.

У вас есть рабочий пример для этого, перейдя по этой ссылке: https://github.com/DamianOsipiuk/vue-query/tree/main/examples/simple

Метки: ,