Избегайте нового запроса axios каждый раз, когда визуализируется компонент vue

Question

Я очень новичок в Vue, поэтому извините за недостаток знаний здесь.

1. В одном из моих (дочерних) компонентов (Product_Collection.vue) Я делаю запрос axios, чтобы получитьнекоторые товары из моего магазина Shopify через API GraphQL:

   data: () => {
    return {
      products: null
    }
   },
   methods: {
    getProducts: function(){
      // 1. axios code here...
      // 2. ...then assign result to "this.products" data property 
    }
   }
   

2. Продукты отображаются в виде миниатюр (скажем, 10 футболок).Затем я щелкаю продукт, чтобы просмотреть его более подробно, с дополнительной информацией о продукте, изображениями и т. Д. (Очень похоже на Amazon).

3. Продукт показан отдельно в виде Product_Single.vue компонент.Пока все хорошо.

Но вот проблема ...

Когда я возвращаюсь на страницу продуктов (Product_Collection.vue) (страница с 10 футболками), снова вызывается запрос axios к API Shopify, и компонент перерисовывается с нуля.

Мой вопрос: как я могу сказать Vue прекратить извлекать данные из API Shopify при каждом рендеринге компонента?Спасибо

Answer 1

Если вы не используете Vue Router и скрываете страницу списка, вы можете попробовать простой вариант.

Вместо v-if используйте v-show.Компонент будет скрыт и отображен снова.Он не будет воссоздан.

Кроме того, где вы называете API?От created или mounted крючка?

Answer 2

Если вы используете GraphQL, то есть способ управления состоянием Apollo, который прекрасно интегрируется с graphQL.Проверьте это: https://dev.to/n_tepluhina/apollo-state-management-in-vue-application-8k0

Так что вместо переписывания приложения с помощью axios и добавления vuex в смесь, возможно, клиент Apollo будет более удобным

Answer 3

Звучит так, как будто вы хотите контролировать кеш, который Axios поддерживает с расширением.

https://github.com/kuitos/axios-extensions

import axios from 'axios';
import { cacheAdapterEnhancer } from 'axios-extensions';

const http = axios.create({
    baseURL: '/',
    headers: { 'Cache-Control': 'no-cache' },
    // cache will be enabled by default
    adapter: cacheAdapterEnhancer(axios.defaults.adapter)
});

http.get('/users'); // make real http request
http.get('/users'); // use the response from the cache of previous request, without real http request made
http.get('/users', { cache: false }); // disable cache manually and the the real http request invoked

Или вы можете пойти по более сложному маршруту и ​​самостоятельно кэшировать результаты в объекте и проверить, существует ли этот объект, но тогда вам придется иметь дело с тем, когда вы хотите истечь данными в этом объекте.

Если вы используете заголовки управления кэшем, а также заголовки и срок действия кэширования, вы можете извлекать все это из уровня API и не иметь дело с устаревшими данными, управляемыми вручную, в приложении.