一 创建测试项目

vue init webpack-simple vuedemo

二 进入demo目录

cd vuedemo

三 安装依赖

cnpm install

四 修改代码

src/App.vue

<template>
  <div id="app">
    <input type="text" v-model="todo" @keydown="doAdd($event)"/>
<h2>doing</h2>
 <ul>
  <li v-for="(item,key) in list" :key="item.id" v-if="!item.checked">
   <input type="checkbox"  v-model="item.checked" @change="saveList()"/> {{item.title}}--- <button @click="removeData(key)">Delete</button>
  </li>
  </ul>


  <h2>done</h2>
 <ul class ="finish">
  <li v-for="(item,key) in list" :key="item.id" v-if="item.checked">
  <input type="checkbox" v-model="item.checked" @change="saveList()"/> {{item.title}}--- <button @click="removeData(key)">Delete</button>
  </li>
  </ul>

  </div>
</template>

<script>
import storage from './model/storage.js'

console.log(storage);

export default {
  name: "app",
  data() {
    return {
      todo:'',
      list:[
        {
          title:'write book',
          checked:true
        },
        {
          title:'lean cook',
          checked:true
        }
      ]
    };
  },
  methods:{
    doAdd(e){
      if(e.keyCode == 13){//enter
        this.list.push({title:this.todo, checked:false});
        this.todo = ""
      }      
      
      storage.set('list', this.list)
    },
    removeData(key){
      this.list.splice(key, 1)

      storage.set('list', this.list)
    },    
    saveList(){
      storage.set('list', this.list)       
    }
  },
  mounted: function () {//when vue refresh 
    var list = storage.get('list')

    if(list){
      this.list = list;
    }
  },


};
</script>

<style>
.finish li{
  background:#eee;
}
</style>

src/model/storage.js

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;

五 运行

npm run dev

image.png

六 总结

1 声明模块和导出模块
var storage = {
函数定义，
变量定义
}
export default storage; //导出模块

export default 和 export 区别：
1.export与export default均可用于导出常量、函数、文件、模块等
2.你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用
3.在一个文件或模块中，export、import可以有多个，export default仅有一个
4.通过export方式导出，在导入时要加{ }，export default则不需要

《1.export的使用方法
//a.js
export const str = "blablabla~";
export function log(sth) { 
  return sth;
}
对应的导入方式：

//b.js
import { str, log } from 'a'; //也可以分开写两次，导入的时候带花括号

《2.export default的使用方法
//a.js
const str = "blablabla~";
export default str;
对应的导入方式：

//b.js
import str from 'a'; //导入的时候没有花括号

引用 链接：https://www.jianshu.com/p/edaf43e9384f

七 参考

https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export