vue學習如何引入js,封裝操作localStorage本地儲存的方法

// 封裝操作localStorage本地儲存的方法 模塊化的文件
 
//nodejs 基礎
 
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;

export用於對外輸出本模塊（一個文件可以理解為一個模塊）變量的接口
import用於在一個模塊中加載另一個含有export接口的模塊。
也就是說使用export命令定義了模塊的對外接口以后，其他JS文件就可以通過import命令加載這個模塊（文件）

 

<script>
 
import storage from './model/storage.js'
 
export default {
  data () {  /*業務邏輯里面定義的數據*/
    return {
      msg: '你好 vue',
      todo:"",
      list:[],
    }
  },
  methods: {
    doadd(e){
      if(e.keyCode==13){
        this.list.push({
          title:this.todo,
          checked:false
        });      
      }
      storage.set('list',this.list);//localStorage會可以將第一次請求的數據直接存儲到本地
    },removeData(index){
      this.list.splice(index,1);
      storage.set('list',this.list);
    },
    savelist(){
      storage.set('list',this.list);
    }
  },
  mounted() { /* 生命周期函數 vue頁面刷新就會觸發的方法 */
    var list=storage.get('list');
    if(list){
      this.list=list;
    }
  },  
}
</script>

 

 

export與export default
但是export跟export default 有什么區別呢？

1、export與export default均可用於導出常量、函數、文件、模塊等
2、你可以在其它文件或模塊中通過import+(常量 | 函數 | 文件 | 模塊)名的方式，將其導入，以便能夠對其進行使用
3、在一個文件或模塊中，export、import可以有多個，export default僅有一個
4、通過export方式導出，在導入時要加{ }，export default則不需要

這樣來說其實很多時候export與export default可以實現同樣的目的，只是用法有些區別。注意第四條，通過export方式導出，在導入時要加{ }，export default則不需要。使用export default命令，為模塊指定默認輸出，這樣就不需要知道所要加載模塊的變量名

 

來源：https://blog.csdn.net/qq_33562537/article/details/85255846