Question

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

在我的一个（子）组件(Product_Collection.vue)中，我发出了一个axios请求，以通过其GraphQL API从Shopify商店中获取一些产品：

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

产品显示为缩略图（假设有10件T恤）。然后，我单击一个产品，以查看更多产品信息和图像等的更多细节（非常像亚马逊的体验）。
该产品自己显示在Product_Single.vue组件中。到目前为止一切顺利。

但这是问题所在...

当我单击返回产品页面(Product_Collection.vue)（带有10件T恤的页面）时，再次调用Shopify API的axios请求，并且从头开始重新渲染该组件。

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

Answer 1

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

使用v-show代替v-if。该组件将被隐藏并再次显示。不会重新创建。

此外，您在哪里调用API？是从created还是mounted钩中获取？

Answer 2

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 3

如果您使用的是GraphQL，则可以使用Apollo状态管理方法与graphQL很好地集成在一起。检查一下：https://dev.to/n_tepluhina/apollo-state-management-in-vue-application-8k0

因此，与其用axios重写应用程序并在混合物中添加vuex，也许Apollo客户端会更方便

每次渲染vue组件时，避免使用新的axios请求

3 个答案: