javascript - 页面刷新时的 Vuex 状态

Question

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

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

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

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

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

我应该使用cookies吗或者任何其他更好的解决方案可用...

-

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