有没有办法在 VueJS 中缓存 API 响应

Question

在我们的 VueJS 应用程序中，每当页面重新加载时，我们都会调用很少的 API。在那些 API 中。很少有反应永远不会改变，很少会改变。我计划缓存这些 API 调用响应并将其存储在一个变量中，并在需要时使用它，并减少页面重新加载时的请求数量。

我是 vueJS 的新手，不知道如何实现它。有没有办法在 VueJS 或 Javascript 中实现这一点？任何帮助将不胜感激。

示例 HTML 代码，

<div class="col-sm-6">
    <span>Is User Available? {{userInfo[is_user_available]}}  </span>
    <span> User Type : {{userType}} </span>
</div>

API 调用如下所示，

created: function () {
    this.checkForUser();
},
methods: {
    checkForUser: function() {
        this.api.call('user_info', { username : this.username })
        .then((response) => {
            if (response) {
                this.userInfo = response;
                this.userType = this.userInfo['user_type'];
            }
        })
        .catch((error) => {
            this.userInfo.length = 0;
        })
    }
}

Answer 1

如果您将数据存储在常规 Vuex 存储中，除非您使用 vuex-persistedstate 插件，否则您将在页面刷新时丢失它，它将存储数据保存在本地存储中。 （这是一个有效的example）

详细说明@Mysterywood 答案，您可以自己将其存储在本地存储中。

你可以通过简单地做到这一点

得到：

const userType = window.localStorage.getItem('userInfo')

设置：

    window.localStorage.setItem('userInfo', response)

并删除：

    window.localStorage.removeItem('userInfo')

Answer 2

根据您想要深入的程度，有几种方法可以做到这一点：

如果您只想在 SPA 会话期间保持状态，可以这样做：

• Vuex 如果您想存储全局可访问的状态/数据。无论组件是否被销毁/创建，这都允许您的状态持续存在。

• 将其存储在您的根级 Vue 实例中。如果您使用的是 Vue CLI，这将在您的 main.js 中。你可以这样做：

new Vue({
  // ...
  data: {
    userType: {}
  }
})

然后您可以通过this.$root.userType 访问它。这对于小型项目来说很好，但通常不建议这样做，因为事情很快就会变得混乱。

• 还有EventBus，但同样，这很快就会变得一团糟。 Vue3 中也不推荐使用 EventBus。

如果您想缓存响应并在用户关闭其选项卡/浏览器后再次访问它们，您需要查看：

1. Cookie
2. 本地存储
3. 服务工作者

Answer 3

检查一下，它可以帮助：client-side storage in vuejs

客户端存储是快速提高应用程序性能的绝佳方式。通过将数据存储在浏览器本身，您可以跳过每次用户需要时从服务器获取信息。虽然在离线时特别有用，但即使是在线用户也将从本地使用数据而不是远程服务器中受益。客户端存储可以使用 cookie、本地存储（技术上称为“Web 存储”）、IndexedDB 和 WebSQL（不建议在新项目中使用的已弃用方法）来完成。