【Vuex】解决 vuex 刷新后数据丢失问题
问题描述vuex 作为内存来存储,一般在登录成功时需要把用户信息,菜单信息等放置 vuex 中,作为全局的共享数据但是我们存放在 vuex 中的数据在页面刷新的时候 vuex 里的数据会重新初始化,导致数据丢失。因为 vuex 里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载 vue 实例,vuex 里的数据就会被重新赋值。那么如何解决这个问题呢?这里可以使用一个持久化插件 vuex-p
·
问题描述
vuex 作为内存来存储,一般在登录成功时需要把用户信息,菜单信息等放置 vuex 中,作为全局
的共享数据
但是我们存放在 vuex 中的数据在页面刷新的时候 vuex 里的数据会重新初始化,导致数据丢失。因为 vuex 里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载 vue 实例,vuex 里的数据就会被重新赋值。
那么如何解决这个问题呢?这里可以使用一个持久化插件 vuex-persistedstate。
解决方法
1,安装 vuex-persistedstate
npm install --save vuex-persistedstate
2,在 store.js 中引入配置
import createPersistedState from 'vuex-persistedstate'
const store = new Vuex.Store({
state: {
user: {}, // 用户信息
},
mutations: {
setUser (state,user) {
state.user = user
}
},
//把数据存储到本地 localStorage
plugins: [createPersistedState()],
})
export default store
或者存储到 session 中
import createPersistedState from 'vuex-persistedstate'
const store = new Vuex.Store({
state: {
user: {}, // 用户信息
},
mutations: {
setUser (state,user) {
state.user = user
}
},
//把数据存储到本地 session
plugins: [createPersistedState({
storge: window.sessionStorage
})],
})
export default store
更多推荐
已为社区贡献25条内容
所有评论(0)