vuex 存储在 PAGE REFRESH 上丢失数据答案

【问题标题】：vuex store losing data on PAGE REGRESHvuex 存储在 PAGE REFRESH 上丢失数据
【发布时间】：2018-03-19 21:22:09
【问题描述】：

我在 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
})

【问题讨论】：

标签： laravel vue.js vuejs2 vuex

【解决方案1】：

您可以尝试将 Vuex 保存到本地存储或 cookie。

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

【讨论】：

thanx ，但即使在页面刷新后我在 localstorage 中也有我的令牌，但不会从 vuex 商店丢失
抱歉，我无法理解您的问题？
我在本地存储中有该用户的 jwt 令牌，它在本地存储中......只有我在刷新后丢失了 vuex 的存储部分，即 userStore 在代码中，刷新后 userStore 显示为空......跨度>
这样您也可以将您的 userStore 保存到本地存储！

【解决方案2】：

你可以试试这个插件

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

一个支持 Typescript 的 Vuex 插件，可让您将应用的状态保存到 Cookie 或 localStorage 等持久存储中。

【讨论】：

【解决方案3】：

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

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

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

编辑：

使用sessionStorage进行存储。

【讨论】：