在 laravel + Vuejs 中缓存或保存 api 响应数据的理想方法是什么？答案

【问题标题】：what is the ideal way to cache or save the api response data in laravel + Vuejs?在 laravel + Vuejs 中缓存或保存 api 响应数据的理想方法是什么？
【发布时间】：2021-10-24 14:57:56
【问题描述】：

我在一个项目中使用 laravel 和 vuejs。当一个页面被渲染时，api 请求被发送到 laravel 并且我作为响应返回一些数据，我如何保存这些响应数据以避免每次我发送请求刷新页面？我想避免每次刷新页面时都发送请求，所以我只发送一次请求，然后以某种方式将响应保存在某处，并且通过刷新不再发送 api 请求。本地存储不是很安全，刷新页面后vuex store就清空了还有什么办法吗？

【问题讨论】：

因为它是一个前端应用程序，所以你有几个选项，比如 localstorage ，sessionstorage。但是是的，当然存在安全漏洞，用户可能会修改您的存储。然后你的选择是使用 cookie 或 vuex-persitedstate

标签： laravel vue.js

【解决方案1】：

您也可以尝试 Service Worker。为此，您可能需要检查渐进式 Web 应用程序实现。但是如果你的应用程序有很多需要缓存的 API，并且及时更新，你可以使用 Service Worker。

【讨论】：

【解决方案2】：

虽然您的答案可能重复，但您可以使用 vuex-persitedstate 插件。这个插件提供了 options 属性，它提供了一个你想要持久化的变量路径的白名单。参见下面的示例，您可以尝试将“setCounts”添加到路径选项中，这将是持久的。

例子：

const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
     paths: ['setCount']
  })

option paths 是一个包含任何路径的数组，用于部分保持状态。如果没有给出路径，完整的状态会被持久化。如果给定一个空数组，则不会保留任何状态。必须使用点表示法指定路径。还有其他选择，可以查看vuex-persistedstate

【讨论】：

【解决方案3】：

你可以安装一个叫做'vuex-persistedstate'的vuex插件，可以通过npm安装，然后在你的vuex index.js文件中你需要import createPersistedState from 'vuex-persistedstate'; 并在“导出默认值”下方添加plugins: [createPersistedState()],

【讨论】：