页面刷新时的 Vuex 状态

Question

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

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

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

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

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

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

-

原文由 boomboxboy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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 })
    })
  ]
})

我们在这里做的很简单：

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

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

原文由 sobolevn 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

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

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

原文由 James Westgate 发布，翻译遵循 CC BY-SA 4.0 许可协议