vuex持久化插件 vuex-persistedstate

---

 

vuex是在vue项目中常用状态管理组件，但是使用过vuex的小伙伴都知道，当页面刷新时，vuex的值会被初始化，但我们并不想要这样的效果。一般不常更新的状态，固定的信息类的数据之类，我们更希望能够固化到本地，减少无用的接口访问，以及更佳的用户体验。

 

解决方法当然是缓存起来，于是便有了 vuex-persistedstate 的存在

 

安装

npm install --save vuex-persistedstate

 

配置使用

在vuex初始化时候，作为组件引入

import persistedState from 'vuex-persistedstate'
export default new Vuex.Store({
    // ...
    plugins: [persistedState()]
})

 

自定义存储

 vuex-persistedstate 默认使用  localStorage  来缓存数据，当我们想用其它方式缓存数据时

 

• 使用  sessionStorage 缓存数据

plugins: [
  persistedState({ storage: window.sessionStorage })
]

 

• 使用  cookie 缓存数据

　　

import persistedState from 'vuex-persistedstate'
import Cookies from 'js-cookie'

export default new Vuex.Store({
  // ...
  plugins: [
    persistedState({
      storage: {
        getItem: key => Cookies.get(key),
        setItem: (key, value) => Cookies.set(key, value, { expires: 7 }),
        removeItem: key => Cookies.remove(key)
      }
    })
  ]
})

 

参考文献

• vuex-persistedstate
• js-cookie