您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

09中的模块化以及封装Storage组件实现保存搜索的历史记录--完整

发布时间：2023-04-08 23:04:58编辑：雪饮阅读（）

这次主要的内容其实是模块化编程。涉及export、import、from
相当于就是说在一个独立的js文件中可以写一个模块，然后将该模块暴露（export）出去。
然后想要使用这个模块的地方可以import导入，配合from关键字指定该模块所属文件路径。
这里以之前的vue-cli脚手架为例，先在src目录建立modes\storages.js如
var storage={
    getter(key){
        return localStorage.getItem(key);
    },
    setter(key,val){
        localStorage.setItem(key,val);
    }
}
export default storage;
然后在src\app.vue中引用如
<template>
  <div id="app">
 
  </div>
</template>
 
<script>
  import storage from './modes/storage.js';
    export default {    
      data () {
        return {
          msg:"请输入",
          list:[
            'a','b'
          ]
        }
      },
      methods:{
        function1(){
          alert("执行事件的第一种方法");
        },
      },
      mounted(){
        storage.setter("first_key","first_val");
        alert(storage.getter("first_key"));
      }
    }
</script>
 
<style lang="scss">
 
</style>