场景之一
应用API进行用户身份验证,将登录状态保存为Vuex状态中的布尔值。
当用户登录时,设置了 登录状态 并相应地有条件地显示 登录/注销 按钮。
但是当刷新页面时,vue应用程序的状态将丢失并重置为默认值。
这导致的问题就是:即使用户登录了,但刷新页面时,登录状态 也会设置为false, 这样即使用户保持登录状态,也会显示登录按钮而不是注销按钮....
怎么做才能防止这种行为
解决方案
可以使用 vuex-persistedstate 。这是一个用于 vuex 在页面刷新之间处理和存储状态的插件。
示例代码:
import createPersistedState from 'vuex-persistedstate'
const store = new Vuex.Store({
// ...
plugins: [
createPersistedState()
]
})
以上是将状态保存在 localStorage ,也可以使用 js-cookie 将状态保存在cookie
import { Store } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'
const store = new Store({
// ...
plugins: [
createPersistedState({
storage: {
getItem: key => Cookies.get(key),
// 参考 https://github.com/js-cookie/js-cookie#json
setItem: (key, value) => Cookies.set(key, value, { expires: 3, secure: true }),
removeItem: key => Cookies.remove(key)
}
})
]
})
总结:
getItem 加载保存的状态
setItem 保存状态
removeItem 删除保存的状态