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

其实Vuex本质上就不能将对象存储到内存之中，官方的介绍只是【抽取组件共享状态，以单列模式管理】，也就是是，Vuex从本质上只是将组件的数据全局管理，并没有本地存储的功能。

解决方案可以将Vuex的数据存储到session或者内存中：

安装 vuex-persistedstate

npm install --save vuex-persistedstate

在 store.js 中引入配置，只是在原有的配置上新增了一项plugins: [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 中

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