刷新页面导致 vuex 数据丢失

方法1:vuex配合sessionStorage

1.当有数据需要存储到 state 内的同时也存储到本地 sessionStorage 中,这个过程写在 mutation 内
2.使用 getter 计算当需要的参数不存在时从 sessionStorage 中获取

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        userInfo: ''
    },
    getters:{
        getUserInfo(state){
            if (!state.userInfo) {
                state.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
            }
            return state.userInfo
        }
    },
    mutations: {
        saveUserInfo(state, userData) {
            state.userInfo = userData;
            sessionStorage.setItem('userInfo',JSON.stringify(userData));
        }
    }
})

export default store

方法2:使用插件 vuex-along

npm install vuex-along --save 安装

import Vue from 'vue'
import Vuex from 'vuex'
import createVuexAlong from 'vuex-along'
Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        userInfo: ''
    },
    getters: {
        getUserInfo(state) {
            if (!state.userInfo) {
                state.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
            }
            return state.userInfo
        }
    },
    mutations: {
        saveUserInfo(state, userData) {
            state.userInfo = userData;
            sessionStorage.setItem('userInfo', JSON.stringify(userData));
        }
    },
    plugins: [
        createVuexAlong({
            // 设置保存的集合名字，即存储到本地的键名
            name: "hello-vuex-along",
            local: { //可以设置 local ： false --> 即不存储到local中，session也一样
                list: ["userInfo"],
                // 过滤 userInfo， 将其他的存入 localStorage
                isFilter: true,// 是否开启过滤
            },
            session: { //vuex-along可以配合 Module 使用，不写入isFilter选项时 list 内的参数为需要存储的
                // 保存模块 module 中的 a1 到 sessionStorage
                list: ["module.a1"],
            },
        }),
    ],
})

export default store

【↓↓有收获请点个赞哦~~】