vuex持久化插件 vuex-persistedstate
vuex是在vue項目中常用狀態管理組件，但是使用過vuex的小伙伴都知道，當頁面刷新時，vuex的值會被初始化，但我們并不想要這樣的效果。一般不常更新的狀態，固定的信息類的數據之類，我們更希望能夠固化到本地，減少無用的接口訪問，以及更佳的用戶體驗。
解決方法當然是緩存起來，于是便有了 vuex-persistedstate 的存在
安裝
1 npm install --save vuex-persistedstate
配置使用
在vuex初始化時候，作為組件引入
1 import persistedState from 'vuex-persistedstate' 2 export default new Vuex.Store({ 3 // ... 4 plugins: [persistedState()] 5 })
自定義存儲
vuex-persistedstate 默認使用 localStorage 來緩存數據，當我們想用其它方式緩存數據時
- 使用 sessionStorage 緩存數據
1 plugins: [ 2 persistedState({ storage: window.sessionStorage }) 3 ]
- 使用 cookie 緩存數據
1 import persistedState from 'vuex-persistedstate' 2 import Cookies from 'js-cookie' 3 4 export default new Vuex.Store({ 5 // ... 6 plugins: [ 7 persistedState({ 8 storage: { 9 getItem: key => Cookies.get(key), 10 setItem: (key, value) => Cookies.set(key, value, { expires: 7 }), 11 removeItem: key => Cookies.remove(key) 12 } 13 }) 14 ] 15 })
參考文獻
浙公網安備 33010602011771號