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

问题描述

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

localStorage，sessionStorage区别

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