八、Vue之封装通用方法
以封装缓存为例进行讲解:1.首先在 src 目录下新建 util 目录2.新建 storage.js 文件3.封装方法// 封装本地存储的方法var storage={set(key, value) {//对象必须序列化才能存入缓存localStorage.setItem(key, JSON.stringify(value));},...
·
以封装缓存为例进行讲解:
1.首先在 src 目录下新建 util 目录
2.新建 storage.js 文件
3.封装方法
// 封装本地存储的方法
var storage={
set(key, value) {
//对象必须序列化才能存入缓存
localStorage.setItem(key, JSON.stringify(value));
},
get(key) {
//反序列化
return JSON.parse(localStorage.getItem(key));
},
remove(key) {
localStorage.removeItem(key);
}
}
export default storage;
4.使用封装的方法
<script>
//引入封装的方法
import storage from './util/storage.js';
export default {
name: 'app',
data() {
return {
todo: '',
list: []
}
},
methods: {
addByEnterKey(e) {
console.log("調用了");
if (e.keyCode == 13) {
this.add();
// 调用封装的方法,缓存对象
storage.set('list', this.list);
}
},
add() {
var obj = {
title: this.todo,
isCompleted: false
};
this.list.push(obj);
this.todo = '';
},
remove(key) {
this.list.splice(key, 1);
storage.set('list', this.list);
},
save() {
storage.set('list', this.list);
}
},
// 生命周期函数 页面刷新时调用
mounted() {
// 调用封装的方法,取出缓存对象
var list = storage.get('list');
if (list) {
this.list = list;
}
}
}
</script>
更多推荐
已为社区贡献11条内容
所有评论(0)