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

问题描述

        我们在写 vue 项目的时候，经常会用到 vuex 作为内存来储存，例如一般在登录成功的时候需要把用户信息，菜单信息等放置 vuex 中，作为全局的共享数据。

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

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

解决方法

1、安装 vuex-persistedstate

npm install --save vuex-persistedstate

2、在 store.js 中导入使用

// store 里导入 createPersistedState
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 里面

// store 里导入 createPersistedState
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;