刷新页面上的Vuex状态

Question

我的应用程序使用Firebase API进行用户身份验证，将登录状态保存为Vuex状态下的布尔值。

当用户登录时，我设置登录状态并相应地有条件地显示登录/注销按钮。

但是当页面刷新时，vue应用的状态丢失并重置为默认

这会导致一个问题，即使用户登录并刷新页面，登录状态也会被设置为false，并且显示登录按钮而不是注销按钮，即使用户保持登录状态...

我该怎么做才能防止这种行为

我应该使用cookies还是其他更好的解决方案。。。

-

Answer 1

Vuex状态保持在存储器中。页面加载将清除此当前状态。这就是状态不坚持重新加载的原因。

但是vuex persistedstate插件解决了这个问题

npm install --save vuex-persistedstate

现在将其导入商店。

import Vue from 'vue'
import Vuex from 'vuex'
import account from './modules/account'
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    account,
  },
  plugins: [createPersistedState()]
});

它只需一行代码即可完美运行：插件：[createPersistedState（）]

Answer 2

创建VueX状态时，请使用VueX persistedstate插件将其保存到会话存储。这样，当浏览器关闭时，信息将丢失。避免使用cookie，因为这些值将在客户端和服务器之间传递。

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex);

export default new Vuex.Store({
    plugins: [createPersistedState({
        storage: window.sessionStorage,
    })],
    state: {
        //....
    }
});

使用会话存储。清除（） 当用户手动注销时。

Answer 3

这是一个已知的用例。有不同的解决方案。

例如，可以使用vuex persistedstate。这是一个用于vuex的插件，用于处理和存储页面刷新之间的状态。

示例代码：

import { Store } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'

const store = new Store({
  // ...
  plugins: [
    createPersistedState({
      getState: (key) => Cookies.getJSON(key),
      setState: (key, state) => Cookies.set(key, state, { expires: 3, secure: true })
    })
  ]
})

我们在这里做的很简单：

1. 你需要安装js-cookie
2. 在getState上，我们尝试从Cookies
加载保存的状态
3. onsetState我们保存我们的状态到Cookies

文档和安装说明：https://www.npmjs.com/package/vuex-persistedstate