Nuxt，Vuex 数据在浏览器刷新时清除

Posted 2023-02-22

【中文标题】Nuxt，Vuex 数据在浏览器刷新时清除

【英文标题】：Nuxt, Vuex data clears on browser refresh

【发布时间】：2021-05-27 23:50:51

【问题描述】：

我有一个在前端使用 Nuxt 的应用程序。由于 Nuxt 是一种 s-s-r 技术，因此刷新浏览器后 vuex 存储中的数据会被删除。即使在刷新浏览器之后，有没有办法将 vuex 数据保存并保存在浏览器存储中（最好 不是 cookie）？

【问题讨论】：

本地存储数据永远不会在浏览器刷新时被删除。而且 vuex 不会自动将数据保存在 localStorage 上。

你的 Vue 状态和 Nuxt 是 s-s-r 的事实无论如何都没有关系。当您刷新任何常规 VueJS 应用程序时，状态将消失，因此您将从页面（以及 Vuex）中删除整个数据。

【参考方案1】：

我们使用vuex-persist 在 indexDB 中保存一些存储信息以提供离线功能 (PWA)，但您也可以使用本地存储和 cookie。它非常易于使用，并且还有一个 nuxt 实现：

// Inside - nuxt.config.js
export default 
  plugins: [
     src: '~/plugins/vuex-persist', s-s-r: false 
  ]

// ~/plugins/vuex-persist.js
import VuexPersistence from 'vuex-persist'

export default ( store ) => 
  new VuexPersistence(
  /* your options */
    key: 'vuex', // The key to store the state on in the storage provider.
    storage: window.localStorage, // or window.sessionStorage or localForage 
  ).plugin(store);

【讨论】：

您可能会遇到渲染错误，因为客户端的渲染与服务器的渲染方式不同，由客户端 vuex 持续发出

【参考方案2】：

如果没有任何类型的浏览器存储，您将无法保存 Vuex 状态。根据您需要存储的内容，您可以使用：

localStorage如果是一些小信息，一些设置或类似的东西 对您的后端进行 API 调用并相应地重新填充您的 Vuex 存储（最好的解决方案，特别是如果您在 localStorage 中存储了一些 JWT 令牌） IndexedDB API，没用过，不过是个轻量级的数据库

不过，出于各种原因（安全、性能、原则等），在浏览器中存储整个 Vuex 状态并不是一件事情。

【参考方案3】：

除了kissu的回答。您可以使用 replaceState 来恢复已保存的状态。

但您可能不应该这样做，您可以创建一个您的用户无法通过刷新来摆脱的错误。这真是令人沮丧。

执行此操作的模式相当简单。

首先，在vuex中，订阅所有突变

https://vuex.vuejs.org/api/#subscribe

const unsubscribe = store.subscribe((mutation, state) => 
  console.log(mutation.type)
  console.log(mutation.payload)
)

// you may call unsubscribe to stop the subscription
unsubscribe()

检查您有兴趣保存哪些突变并将它们存储在 localStorage、IndexDb 或您想要的任何内容中。

在页面加载时，您需要检查您的存储解决方案是否有此数据。如果存在。调用替换状态 https://vuex.vuejs.org/api/#replacestate

store.replaceState(state: Object) // give it an object structure matching your Vuex module state structure

这就是保存和重新加载状态的方式。