vue学习笔记：用vue来写一个todolist，并且在vue中封装一个js，在组件中调用

今天我要实现的是一个简单的可以在本地进行缓存的todolist待办事项功能，例如网上的待办事项：http://www.todolist.cn/，可以根据自己的需要进行添加、删除和改变事项的状态，下面我们就用vue来实现 这个功能。

我们使用的vue-cli搭建的一个项目，在app.vue根组件进行编写，这样就不用创建路由进行跳转了，具体实现如下：

组件html模板：

js代码：

封装的本地缓存组件：storage.js

// 封装本地缓存localStorage


var storage = {

    set(key,value){
        localStorage.setItem(key,JSON.stringify(value));
    },
    get(key,value){
        return JSON.parse(localStorage.getItem(key,value));
    },
    remove(key){
        localStorage.removeItem(key);  
    }
}

// 封装完成之后的一个方法一定要把封装的方法暴露出去,这样其他的文件才能用
export default storage;

通过一个input文本框进行代办事项的添加，实际原理就是通过input文本数据绑定，代办的事项添加到一个数组中，再把数组数据进行遍历，遍历出来的每一项都存在一个属性checked，根据遍历出的数据前面的checkbox多选框进行对事项状态的改变，默认添加的待办事项的状态是checked：false，也就是单选框未选中状态，也就是待办事项状态，当我们选择了input框，滴啊版事项就变成了已办事项，checked：true，这样就完成了代办事项标的基本功能，添加事项的时候采用的是键盘点击事件@keydown,这个事件中的$event对象，有一个键盘标识序号，我们以回车键为例，触发添加事件，回车键的序号是13，也就是代码中的e.keyCode == '13'，这是我们会向数组中添加一个代办事项。

基本功能完成后，但是当我们刷新页面的时候我们之前添加的数据就会消失，这个时候我们就需要配用到本地缓存，可以保证我们刷新页面的时候数据不会被清除，这个本地缓存功能我们通过封装一个组件进行完成，主要是为了减少代码的冗余性，也锻炼我们一下模块化开发的意识。首先我们要建立一个空的js文件，就是我们需要放置封装本地缓存方法的地方，然后根据本地缓存数据的特性，创建储存方法set和取出缓存数据的方法get和移除缓存数据的方法remove，注意这个封装的组建中一定要把组件给暴露出去，其他的组件次才能调用，代码如上图，然后我们就可以在组建中引入这个封装的组件：

// 在组件中引入封装的方法
import storage from './model/storage.js';

然后可以在js中直接调用，添加数据的时候和修改数据的时候，通过触发storage.set方法存储数据，当页面刷新的时候，通过生命周期mounted默认加载缓存的数据，从而达到本地缓存数据的效果。

效果图如下：