Vue挂载全局方法

阳光穿透心脏的1/2处 2024-04-22 22:30 75阅读 0赞

#### 简介：有时候，频繁调用的函数，我们需要把它挂载在全局的vue原型上，方便调用，具体怎么操作，这里来记录一下。 ####

#### 一、这里以本地存储的方法为例 ####

####  ####

#### 二、在main.js中引入存储方法，然后在路由守卫中挂载在vue的原型上 ####

import db from "@/store/localStorage";
    
    new Vue({
      el: '#app',
      beforeCreate() {
        // 在 Vue 实例创建之前将 db 方法添加到原型上  
        Vue.prototype.$db = db;
      },
      router,
      store,
      render: h => h(App)
    })

####  ####

#### **三、最后，就可以在全局的vue组件中使用** ####

//直接在created里面打印查看
    created() {
        console.log(this.$db);
    },

#### 可以看到，db方法挂载成功 ####

![988bcd7a9d994816a583b5370493dfce.png][]

#### 直接使用，通过this.$db方法，调用指定方法 ####

//存储数据
    this.$db.save('存储的名字',存储的数据 );
    
    //获取数据
    this.$db.get("获取的存储数据名称");
    
    //移除数据
    this.$db.remove("移除存储数据的指定名称");
    
    //全部清空
    this.$db.clear();

#### 创作不易，感觉有用，就一键三连，感谢(●'◡'●) ####

[988bcd7a9d994816a583b5370493dfce.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/1b59b3bc738f455f85aca2dc4167342d.png