欢迎使用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();    });}

});