Vue使用session缓存数据

步骤

1.页面销毁的时候添加缓存
2.加载数据的时候取出缓存
3.如果是第一次进到页面，判断section缓存还没有，直接取的是请求回来的数据。
4._.set数据时候要用深度遍历（递归遍历）

//1.
beforeDestroy() {
    //将数据转成字符串
    var _data_str = JSON.stringify(this._data);
    this.$session.set('car_parameter', _data_str);
},
//2.
mounted() {
    var _data_str = this.$session.get('car_parameter');
    //将json字符串转成对象
    var store_data = JSON.parse(_data_str);
    //3.
    if (_data_str) {
        //4.
        _.set(this._data,store_data);
    }else {
        this.$xhr
            .post('获取数据URL')
            .then(res => {
                this._data = res.data;
            })
            .catch(() => console.log('请求错误'));
    }
},

(注意：这里的session我进行了封装，你也可以直接使用浏览器的session)
session封装详情：https://www.jianshu.com/p/1a6801aa9250

深度遍历方法

_.set = (target, current, cb) => {
    if (!(target instanceof Object) || !(current instanceof Object)) return;
    Object.keys(target).forEach(function(name) {
        let value = current[name];
        if (typeof value !== 'undefined' && target.hasOwnProperty(name)) {
            // 如果有callback，先执行callback
            if (typeof cb === 'function') {
                target[name] = cb(name, value);
                return;
            }

            // 如果是对象，进行深层次拷贝
            if (Object.prototype.toString.call(target[name]) === '[object Object]') {
                _.set(target[name], current[name], cb);
                return;
            }

            target[name] = value;
        }
    });
};