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

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

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

组件html模板：

<template>
  <div id="app">
    <input type="text" v-model="InputVal" @keydown="addVal($event)">
    <br>
    <hr>
    <h2>进行中</h2>
        <ul>
          <li v-for="(item,index) in list" v-if="!item.checked">
            <input type="checkbox" name="" id="" v-model="item.checked" @change="SaveDelete">{{item.title}} -- <button  @click="Delete(index)">删除</button >
          </li>
        </ul>

    <h2>已完成</h2>
        <ul>
          <li v-for="(item,index) in list" v-if ="item.checked">
            <input type="checkbox" v-model="item.checked" >{{item.title}} -- <button @click="Delete(index)">删除</button> 
          </li>
        </ul>
  </div>
</template>

js代码：

<script>
// 在组件中引入封装的方法
import storage from './model/storage.js';
console.log(storage);
export default {
  data(){
    return{
        title:'这是一个鼠标点上去内容',
        msg:'数据',
        list:[],
        InputVal:''  
    }
  },
  methods:{
    addVal(e){
      console.log(e);
      if(e.keyCode == '13'){
        this.list.push(
          {title:this.InputVal,checked:false}
        );
        this.InputVal ="";
      }
      // localStorage.setItem("list",JSON.stringify(this.list))
      storage.set('list',this.list)
    },
    Delete(index){
      this.list.splice(index,1);
      // localStorage.setItem("list",JSON.stringify(this.list))
      storage.set('list',this.list);
    },
    SaveDelete(){
      // localStorage.setItem("list",JSON.stringify(this.list))
      storage.set('list',this.list);
    }
  },
  mounted(){
    //console.log(localStorage.getItem('list'));
    var list = storage.get('list');
    // var list  = JSON.parse(localStorage.getItem('list'));
    if(list){
      this.list = list;
    }
  }
}
</script>

封装的本地缓存组件：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默认加载缓存的数据，从而达到本地缓存数据的效果。

效果图如下：