vuex清掉数据_页面刷新后，vuex中数据丢失、清空的解决方案 vuex-persistedstate

场景之一

应用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 删除保存的状态