vuex 存储在页面刷新时丢失数据

Question

我正在 laravel 和 vuejs 中构建身份验证系统，我正在使用 JWT 构建并将令牌存储在 lacalstorage 中。我能够将用户数据存储在 vuex 商店中，是的，我可以在 devtool 的 vuex 区域下看到。问题是当我刷新页面时我丢失了它。我想保留用户的信息，它不应该在页面刷新时被删除。我怎样才能做到这一点

import Vue from 'vue'
import Vuex from 'vuex'

import userStore from './components/user/userStore'

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'


export default new Vuex.Store({
    modules : {
        userStore
    },
    strict : debug
})

Answer 1

您可以尝试将您的 Vuex 保存到 localstorage 或 cookie。

有一个插件可以帮助将您的状态保存到本地存储https://github.com/robinvdvleuten/vuex-persistedstate

Answer 2

你可以试试这个插件

https://github.com/championswimmer/vuex-persist

A Typescript-ready Vuex plugin that enables you to save the state of your app to a persisted storage like Cookies or localStorage.

Answer 3

我遇到了完全相同的问题。我是这样解决的：

state: {
    authenticated: localStorage.getItem('yourToken')
}

现在您可以在 actions: {} 或其他任何地方将 this.authenticated 设置为 true 或 false。意思是你必须默认将你的 localStrage 存储到你的 autenticated。如果您无法理解，请告诉我，我可以为您提供更多我的案例示例。也许你会这样想的。

编辑：

使用sessionStorage存储。

vuex 存储在页面刷新时丢失数据

vuex store losing data on PAGE REGRESH

laravel

vue.js

vuejs2

vuex

编辑：