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

场景之一

应用API进行用户身份验证，将登陆状态保存为Vuex状态中的布尔值。

当用户登陆时，设置了 登陆状态 并相应地有条件地显示 登陆/注销 按钮。
​
可是当刷新页面时，vue应用程序的状态将丢失并重置为默认值。
​
这致使的问题就是：即便用户登陆了，但刷新页面时，登陆状态 也会设置为false， 这样即便用户保持登陆状态，也会显示登陆按钮而不是注销按钮....
​
怎么作才能防止这种行为vue

解决方案

可使用 vuex-persistedstate 。这是一个用于 vuex 在页面刷新之间处理和存储状态的插件。git

示例代码：github

import createPersistedState from 'vuex-persistedstate'

const store = new Vuex.Store({
  // ...
  plugins: [
    createPersistedState()
  ]
})

以上是将状态保存在 localStorage ，也可使用 js-cookie 将状态保存在cookievuex

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

总结：npm

1. 须要安装 js-cookie
2. getItem 加载保存的状态
3. setItem 保存状态
4. removeItem 删除保存的状态

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