vuex结合localStorage实现状态持久化
1 . 安装
npm install vuex-persistedstate
2 . 在store.js里
import createPersistedState from 'vuex-persistedstate'
const state = {
user:{},
}
export default new Vuex.Store({
state,
getters,
actions,
mutations,
plugins: [createPersistedState()]//会自动保存创建的状态。刷新还在
});
可以看到,引用的时候有一个storage: window.sessionStorage,说明会把数据存储到localStorage中
可配置项
key: storage名称,所有的数据会存储到一个key里面,默认:vuex
storage: 数据存储位置,默认:localStorage
3 . 组件中获取
vuex里面存放的数据,页面一经刷新会丢失:
解决办法: 存放在localStorage或者sessionStorage里面,进入页面时判断是否丢失,丢失再去localStorage或者sessionStorage里面取;
在app.vue根组件的created里面判断是否丢失,在进行上面的操作;
created(){
if(localStorage.vuex){
this.list=JSON.parse(localStorage.vuex)
}
},
vuex-persistedstate 使用浏览器的本地存储( local storage )对状态( state )进行持久化。这意味着刷新页面或关闭标签页都不会删除你的数据。
一个很好的例子就是购物车:如果用户不小心关闭了一个标签,他们可以重新打开并回到之前页面的状态。