欢迎使用CSDN-markdown编辑器

vue.js如何实现翻页缓存

实现翻页缓存要解决的问题：
1.如何存数据
2.如何更新数据
解放方法：
问题1的解决方法：设置全局变量，我的代码中定义的是数组
问题2的解放方法：利用数组的属性

注意点：数组索引是用唯一标识字段，并不是原始的从0开始，此时数组的大小可能是零但是实际有值。

直接上js代码（只需要看query方法和submit方法）：

var conten = new Vue({
el: ‘#evaluate’,
data: {
alltotal: [],//缓存数组,索引值是tamId
count: 0,//用于判断缓存数组里面是否已经有数据
evaluates: [],//回显数组
newevaluate: [],//要传到后台的数组
page: [],
level: 0,
activityId: ”,
errors: [],//错误提示信息
},
watch: {
evaluates: {
handler: function (newValue, oldValue) {
for (var i = 0; i < newValue.length; i++) {
var cal = newValue[i].content;
if (cal.length > 100) {
this.errors[i] = true;
} else {
this.errors[i] = false;
}
var level = newValue[i].level;
this.clickStart(i, level);
}
},
deep: true
}
},
methods: {
query: function (pageNum, pageSize) {
var self = this;
//当前页面的数据有一条不符合要求时，跳出方法（阻止翻页）
var temp = 0;
self.errors.forEach(function (item) {
if (item == true) {
temp = 1;
}
});
if (temp == 1) {
return;
}
base.ajax({
url: “/activity/findUserByActivityId”,
pageNum: pageNum,
pageSize: pageSize,
data: {
activityId: self.activityId
},
success: function (data1) {
self.beforeEvaluates = data1.list;
self.page = base.navPageWarp(data1);
//缓存页面数据
if (self.count == 0) {//初始化缓存数组
self.evaluates = data1.list;
for (var n = 0; n < data1.list.length; n++) {
self.alltotal[data1.list[n].tamId] = data1.list[n];
self.count++;
}
} else {//判断当前数据在缓存中是否存在
for (var i = 0; i < (data1.list).length; i++) {
for (var item in self.alltotal) {
if (data1.list[i].tamId == item) {
var obj = self.alltotal[item];//存在则从缓存中取值
// self.evaluates[i] = obj;
data1.list[i] = obj;
break;
}
}
// self.evaluates = data1.list;
self.alltotal[data1.list[i].tamId] = data1.list[i];//扩增数组或替换数组中的值
self.count++;
}
self.evaluates = data1.list;
}
}
});
},
clickStart: function (index, num) {
var self = this;
self.evaluates[index].level = num;
self.clearStart(index);
for (var i = 1; i <= num; i++) {
var span = document.getElementById(‘start’ + i + index);

        }
    },
    clearStart: function (index) {
        var path = $("#basePath").val();
        for (var i = 1; i <= 5; i++) {
            var span = document.getElementById('start' + i + index);
            $(span).attr("src", path + "/resources/img/gray-star.png");
        }
    },
    //新增评论
    submit: function () {
        var self = this;
        var errors = self.errors;
        var temp = 0;
        errors.forEach(function (item) {
            if (item == true) {
                temp = 1;
            }
        });
        if (temp == 1) {
            return;
        }
        var n = 0;//用于newevaluate的扩增时指定起始位置
        for (var obj in self.alltotal) {//从缓存中获取数据
            if (self.alltotal[obj].type == 0) {//type为0表示新增的数据，用于过滤数据
                var content = self.alltotal[obj].content.trim();//删除前后空格
                self.alltotal[obj].content = content;
                if (self.alltotal[obj].level != 0 || content != '') {//评论或者评分有一个不为空时执行
                    self.newevaluate.splice(n, 1, self.alltotal[obj]);//添加数组元素
                    n++;
                }
            }
        }
        //当newevaluate里面有数据时才执行
        if (self.newevaluate.length > 0) {
            base.ajax({
                url: "/activity/updateEvaluate",
                async: false,
                data: {newevaluate: JSON.stringify(self.newevaluate)},
                success: function (msg) {
                    base.msg(msg, function () {//新增成功时的提示信息
                        window.location.href = base.basePath + "/activity/list?menu=activity";//跳转到活动列表页面
                    });
                }
            });
        } else {//当newevaluate里面没有数据时提示信息
            base.msg("至少需要评价一人！", function () {
                return;
            });
        }
    },
    //取消按钮
    cancelEvaluate: function () {
        window.location.href = base.basePath + "/activity/list?menu=activity";//跳转到活动列表页面
    },
},
compiled: function () {
    /*初始化错误提示*/
    for (var i = 0; i < 10; i++) {
        Vue.set(this.errors, i, false);
    }
    this.activityId = $("#activityId").val();
    this.query(1, 10);
    //加载头部信息
    var path = $("#global_context_basePath").val();
    base.shade.show();
    $("#top").load(path + "/activity/view/" + this.activityId + ".do?isInclude=true", function () {
        base.shade.close();
    });
}

});