在 Vue 中缓存请求

在 Vue.js 中，我们经常需要通过 AJAX 或者其他方式向服务器发送请求获取数据。为了提高性能和用户体验，有时候我们会希望缓存这些请求结果，以便在后续使用相同的数据时可以直接从缓存中取得，而不必再次发送请求。

方式一：使用 computed 属性

在 Vue 组件中，我们可以使用 computed 属性来缓存请求的结果。通过将请求的结果保存在一个 computed 属性中，Vue 会自动帮我们缓存结果并在需要时返回。

首先，我们需要定义一个方法来发送请求并返回结果：

methods: {
  fetchData() {
    // 发送请求获取数据
    // ...
    return response.data;
  }
}

然后，在 computed 中定义一个属性，并使用 fetchData 方法来获取数据：

computed: {
  cachedData() {
    return this.fetchData();
  }
}

现在，我们可以在模板中直接使用 cachedData 属性来获取缓存的数据：

<template>
  <div>
    {{ cachedData }}
  </div>
</template>

这样，当组件重新渲染时，如果数据没有发生变化，Vue 会直接使用缓存中的数据，而不必再次发送请求。

方式二：使用 Vue 插件

如果我们希望在整个 Vue 应用中缓存请求结果，而不仅仅是在单个组件中，可以考虑使用 Vue 插件。

首先，我们需要创建一个 Vue 插件，用来管理和缓存请求结果：

// vue-cache-request.js
const cache = {};

export default {
  install(Vue) {
    Vue.prototype.$cacheRequest = {
      get(url) {
        if (cache[url]) {
          return Promise.resolve(cache[url]);
        } else {
          return fetch(url)
            .then(response => response.json())
            .then(data => {
              cache[url] = data;
              return data;
            });
        }
      }
    };
  }
};

然后，在 Vue 入口文件中使用这个插件：

import Vue from 'vue';
import CacheRequest from './vue-cache-request';

Vue.use(CacheRequest);

new Vue({
  // ...
});

现在，我们可以在任何 Vue 组件中使用 $cacheRequest.get() 方法来获取缓存的请求结果：

this.$cacheRequest.get('/api/data')
  .then(data => {
    // 使用缓存的请求结果
    // ...
  });

这样，通过插件的方式，我们可以在整个 Vue 应用中方便地缓存请求结果，并提高性能和用户体验。

以上就是在 Vue 中缓存请求的两种常见方式，根据具体需求选择合适的方式来实现数据缓存。