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

【问题标题】：Nuxt, Vuex data clears on browser refreshNuxt，Vuex 数据在浏览器刷新时清除
【发布时间】：2021-05-27 23:50:51
【问题描述】：

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

【问题讨论】：

本地存储数据永远不会在浏览器刷新时被删除。而且 vuex 不会自动将数据保存在 localStorage 上。
你的 Vue 状态和 Nuxt 是 SSR 的事实无论如何都没有关系。当您刷新任何常规 VueJS 应用程序时，状态将消失，因此您将从页面（以及 Vuex）中删除整个数据。

标签： javascript vue.js local-storage nuxt.js vuex

【解决方案1】：

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

// Inside - nuxt.config.js
export default {
  plugins: [
    { src: '~/plugins/vuex-persist', ssr: 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

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

【讨论】：