欢迎使用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
.tamId] = data1.list
;

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;

9545
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();
});
}

});