Vue 学习 之 封装模块方法

<template>
  <div >  
    <!-- 实现回车键事情@keydown="doAdd($event)"  -->
    <input type="text"  v-model='todo' @keydown="doAdd($event)" />  
    <hr>
    <br>
    <h2>进行中</h2>
    <!-- @change="saveList()"点击文本框时发生改变机制事情 -->
     <ul>
        <li v-for="(item,key) in list" v-if="!item.checked">
           <input type="checkbox" v-model="item.checked" @change="saveList()" /> {{item.title}}   
           -- <button @click="removeData(key)">删除</button>
        </li>
      </ul>
    <br>
    <h2>已完成</h2>
  <ul>      
        <li v-for="(item,key) in list" v-if="item.checked">
          <input type="checkbox"  v-model="item.checked" @change="saveList()" /> {{item.title}}  
          -- <button @click="removeData(key)">删除</button>
        </li>
      </ul>
    <br>
  </div>
</template> 
<script>
import storage from './model/storage.js';
console.log(storage);
    export default {     
      data () {  /*业务逻辑里面定义的数据*/
        return {
          todo:'',
          list:[],
        }
      },
      methods:{
       // 新增
        doAdd(e){
          // connect.log(e); 
          //新增时直接按回车键盘显示 键位==keyCode==13
          if(e.keyCode==13){
            this.list.push({
              title:this.todo,
              checked:false,
            })           
          }
         // 调用 组件显示 storage
           storage.set('list',this.list);
          //缓存
        //  localStorage.setItem('list',JSON.stringify(this.list))
        },
          //删除
          removeData(key){
            this.list.splice(key,1)
             //缓存
              storage.set('list',this.list);
          // localStorage.setItem('list',JSON.stringify(this.list))
          },
          // 每次点击文本框checkbox改变时，从新保存一下
          saveList(){
            // localStorage.setItem('list', JSON.stringify(this.list))
             storage.set('list',this.list);
          },       
      },
      //生命周期函数,vue页面刷新就会触发的方法(和 bata  methods 同级)
          mounted(){
        //  var list=JSON.parse(localStorage.getItem('list'));
        //调用组件使用
        var list=storage.get('list');
          //判断是否存在
          if(list){
            this.list=list;
          }
          }        
    }
</script>
<style scoped >
</style>

封装操作

//封装操作，localstorage 本地存储的方法，模块化文件
//封装模块方法 
var storage={
    set(key,value){
        localStorage.setItem(key,JSON.stringify(value));
    },
    get(key){
        return JSON.parse(localStorage.getItem(key));
    },
    remove(key){
        localStorage.removeItem(key);
    }
}
//把storage 暴露出去
export default storage;

显示