vue中的模块化及storage组件实现保存

To Do List完成代办事项：

<template>
  <div id="app">
    <div class="text-left title">
      <span>To Do List</span>
      <input @keydown="addList" class="userin" type="text" placeholder="请输入...">
    </div>
    <div>
      <p class="h6 un_thing">未完成事项：</p>
      <ul>
        <li v-if="!item.ishow" v-for="(item,index) in lists" :key="index">
          <input @click="changeShow(index)" type="checkbox" :checked="item.ishow">
          {{item.title}}--------------<button @click="deletelist(index)">删除</button>
        </li>
      </ul>
      <p class="h6 un_thing">已完成事项：</p>
      <ul>
        <li v-if="item.ishow" v-for="(item,index) in lists" :key="index">
          <input @click="changeShow(index)" type="checkbox" :checked="item.ishow">
          {{item.title}}--------------<button @click="deletelist(index)">删除</button>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
// 导入使用的模块
import Storage from './Public/Storage.js';
export default{
  name:"app",
  data(){
    return{
      lists:[
        {
          title:"JavaScript录制",
          ishow:false
        },
        {
          title:"Vue录制",
          ishow:true
        }
      ]
    }
  },
  mounted(){
    this.lists=Storage.getStorage("todo");
  },
  methods:{
    addList(e){
      if(e.keyCode===13){
        let ele=e.target.value;
        if(ele.length!=0){
          this.lists.push({
            title:ele,
            ishow:false
          });
          e.target.value="";
          Storage.saveStorage("todo",this.lists);
        }
      }
    },
    changeShow(key){
      this.lists[key].ishow=!this.lists[key].ishow;
      Storage.saveStorage("todo",this.lists);
    },
    deletelist(index){
      this.lists.splice(index,1);
      Storage.saveStorage("todo",this.lists);
    }
  }
}
</script>
<style>
  #app{
    width: 500px;
    min-height: 300px;
    border: 1px solid black;
    margin: 0 auto;
  }
  .title{
    line-height: 30px;
    background-color: black;
    color: white;
    padding-left: 15px;
  }
  .userin{
    position: relative;
    top: -2px;
    left: 40px;
    width: 200px;
    outline: none;
    border-radius: 5px;
    border-style: none;
    padding-left: 10px;
    font-size: 13px;
  }
  .un_thing{
    padding-left: 10px;
  }
</style>

封装一个缓存的模块：
在src中新建一个名为Public的文件，在这个文件下新建一个名为Storage.js的文件夹，在该文件夹里写入封装的模块代码

let storage={
    //保存缓存
    saveStorage(key,value){
        localStorage.setItem(key,JSON.stringify(value));
    },
    //读取缓存
    getStorage(key){
        return JSON.parse(localStorage.getItem(key));
    },
    // 清除缓存
    clearStorage(key){
        localStorage.clearItem(key);
    }
}
//将其暴露出去，别的地方用则导文件即可
export default storage;

在APP.vue中需导入使用的模块：

import Storage from './Public/Storage.js';

使用时：
Storage.方法名称(传值)

Storage.saveStorage("todo",this.lists);