页面刷新时的 Vuex 状态

新手上路,请多包涵

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

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

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

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

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

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

-

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

阅读 709
2 个回答

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

例如,可以使用 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 许可协议

创建 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 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题