页面刷新时的 Vuex 状态

javascript vue.js vuejs2 state vuex

2022-08-30 02:13:41

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

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

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

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

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

我应该使用cookie还是任何其他更好的解决方案...

-

答案 1

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

例如，可以使用 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 })
    })
  ]
})

我们在这里做的很简单：

你需要安装js-cookie
上，我们尝试从中加载保存的状态getStateCookies
就我们把我们的状态保存到setStateCookies

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

答案 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: {
        //....
    }
});

在用户手动注销时使用。sessionStorage.clear();

编辑：请注意，如果您的商店具有本质上不是字符串类型的值（例如日期），则您的应用程序可能会失败或行为可能会更改，因为序列化/反序列化过程会将这些值转换为字符串。