最近一段时间,写了不少vue代码,发现有一部分数据总要在完成某些事件后要进行重置,刚开始总觉得一两个变量直接重置一下就行, 但是只要要重置的数据变多后就会显得凌乱,于是我便开始在vue全局中声明了一个重置函数,来方便我们重置数据
// 该方法用于初始化数据
Vue.prototype.resetData = function(...arr) {
// 循环每个参数
arr.forEach((item, index)=>{
// 判断当前元素的类型并将该元素值设置为初始化状态
switch (Object.prototype.toString.call(this[item])){
case "[object String]":
this[item] = "";
break;
case "[object Number]":
this[item] = 0;
break;
case "[object Array]":
this[item] = [];
break;
case "[object Object]":
this[item] = {};
break;
case "[object Boolean]":
this[item] = false;
break;
}
})
}
本来这个函数判断data中数据的类型来重置为该类型的初始值,但这样非该类型的数据就不可以初始化为另一种类型于是就在此基础上又拓展了一部分,可以将数据重置为指定类型
Vue.prototype.resetData = function(...arr) {
// 循环每个参数
arr.forEach((item, index)=>{
// 如果时参数是字符串时
if(Object.prototype.toString.call(item) === "[object String]") {
// 判断当前元素的类型并将该元素值设置为初始化状态
switch (Object.prototype.toString.call(this[item])){
case "[object String]":
this[item] = "";
break;
case "[object Number]":
this[item] = 0;
break;
case "[object Array]":
this[item] = [];
break;
case "[object Object]":
this[item] = {};
break;
case "[object Boolean]":
this[item] = false;
break;
}
}
// 如果参数类型为对象时
else if(Object.prototype.toString.call(item) === "[object Object]"){
// 找到每一项并重置为传递的任意值
for(let key in item) {
this[key] = item[key];
}
}
})
}
使用方法
如果要重置为当前类型的初始值可以直接写data中的属性名,如果要重置的类型为其他类型则可使用对象名+指定值的方法进项重置
export default {
data() {
return {
str: 'str',
num: 123,
arr: [1, 2, 3],
obj: {a: 1, b: 2, c: 3},
NULL: 123213213213
}
},
onLoad() {
// 重置本类型
this.resetData('str', 'num', 'arr', 'obj');
// 重置到指定类型
this.resetData({NULL: null});
}
}