每次呈现vue组件时避免新的axios请求

Question

我对Vue非常陌生，请原谅我在这里缺乏知识。

1. 在我的(子)组件(Product_Collection.vue)中，我提出了一个axios请求，通过GraphQL API从我的Shopify商店获得一些产品： 数据：() => {返回{ products: null }，方法：{ getProducts: function(){ // 1.// 2. ...then将结果分配给"this.products“数据属性}}
2. 这些产品以缩略图的形式展示(假设有10件t恤)。然后，我点击一个产品来查看更详细的产品信息和图片等(非常类似亚马逊的体验)。
3. 产品在Product_Single.vue组件中自己显示。到目前一切尚好。

但问题是..。

1. 当我单击“产品”页面(Product_Collection.vue) (带有10件t恤的页面)时，将再次调用对Shopify的axios请求，并从头开始重新呈现该组件。

我的问题是，每次呈现组件时，我如何告诉Vue停止从Shopify API获取数据？谢谢

Answer 1

听起来你想要缓存控制，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层驱动所有这些，而不必处理应用程序中手动管理的陈旧数据。

Answer 2

如果您不使用Vue路由器，并且隐藏列表页，则可以尝试一个简单的选项。

而不是v-如果，使用v-显示。组件将被隐藏并再次显示。它不会被重新创造出来。

另外，您在哪里调用API？从created还是mounted hook？

Answer 3

如果您正在使用graphQL，那么就有阿波罗状态管理方法，它与GraphQL很好地集成在一起。看看这个：tepluhina/apollo-state-management-in-vue-application-8k0

因此，与其用axios重写应用程序，还不如在混合物中添加vuex，也许阿波罗客户端会更方便。