页面刷新后,想保存页面未保存的数据。我们总是习惯于放在浏览器的sessionStorage和localStorage中。但是用了vue后,vuex便可以被应用了。
vuex优势:相比sessionStorage,存储数据更安全,sessionStorage可以在控制台被看到。
vuex劣势:在F5刷新页面后,vuex会重新更新state,所以,存储的数据会丢失。
为了克服这个问题, vuex-persistedstate出现了~~
原理:
- 将vuex的state存在localStorage或sessionStorage或cookie中一份
- 刷新页面的一瞬间,vuex数据消失,vuex回去sessionStorage中哪会数据,变相的实现了数据刷新不丢失~
使用方法:
- 安装:
npm install vuex-persistedstate --save
-
配置:在store下的index.js中 import createPersistedState from "vuex-persistedstate" const store = new Vuex.Store({ // ... plugins: [createPersistedState({ storage: window.sessionStorage//或者window.locationStorage })] })