【Vuex】解决vuex刷新后数据丢失问题

问题描述

vuex 作为内存来存储&＃xff0c;一般在登录成功时需要把用户信息&＃xff0c;菜单信息等放置 vuex 中&＃xff0c;作为全局
的共享数据

但是我们存放在 vuex 中的数据在页面刷新的时候 vuex 里的数据会重新初始化&＃xff0c;导致数据丢失。因为 vuex 里的数据是保存在运行内存中的&＃xff0c;当页面刷新时&＃xff0c;页面会重新加载 vue 实例&＃xff0c;vuex 里的数据就会被重新赋值。

那么如何解决这个问题呢&＃xff1f;这里可以使用一个持久化插件 vuex-persistedstate。

解决方法

1&＃xff0c;安装 vuex-persistedstate

npm install --save vuex-persistedstate


2&＃xff0c;在 store.js 中引入配置

import createPersistedState from &＃39;vuex-persistedstate&＃39;const store &＃61; new Vuex.Store({state: {user: {}, // 用户信息 },mutations: {setUser (state,user) {state.user &＃61; user}}, //把数据存储到本地 localStorageplugins: [createPersistedState()],
})export default store


或者存储到 session 中

import createPersistedState from &＃39;vuex-persistedstate&＃39;const store &＃61; new Vuex.Store({state: {user: {}, // 用户信息 },mutations: {setUser (state,user) {state.user &＃61; user}}, //把数据存储到本地 sessionplugins: [createPersistedState({storge: window.sessionStorage})],
})export default store


localStorage&＃xff0c;sessionStorage区别

这里有说明 vuex-persistedstate 的副作用&＃xff0c;个人不建议使用此依赖包