Vue中挂载全局的方法详解，

Vue中挂载全局的方法详解，

简介

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

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

var localStorage = window.localStorage;
const db = {
    /** 
     * 更新状态 
     */
    save(key, value) {
        // console.log(key, value);
        try {
            localStorage.setItem(key, JSON.stringify(value));
        } catch (error) {
            console.error("Error storing data in localStorage:", error);
        }
    },
    /** 
     * 获取状态，如果有状态值，获取最新状态值；如果没有，获取默认值 
     */
    get(key, getSaveVal = null) {
        // console.log(key, getSaveVal);
        try {
            return JSON.parse(localStorage.getItem(key)) || getSaveVal;
        } catch (err) {
            // console.log(err);
            return null; // 如果发生错误，也返回 null
        }
    },
    /** 
     * 移除状态 
     */
    remove(key) {
        // console.log(key);
        localStorage.removeItem(key);
    },
    /** 
     * 清空状态 
     */
    clear() {
        localStorage.clear();
    }
};
export default db;

二、在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方法挂载成功

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

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

到此这篇关于Vue中挂载全局的方法详解的文章就介绍到这了,更多相关Vue挂载全局内容请搜索3672js教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持3672js教程！

您可能感兴趣的文章:

• vue组件挂载到全局方法的示例代码
• vue3.0如何在全局挂载对象和方法
• vue全局挂载实现APP全局弹窗的示例代码
• Vue3全局挂载使用Axios学习实战
• vue3配置全局参数(挂载全局方法)以及组件的使用
• 详解Vue全局组件的挂载之实现弹窗组件
• Vue3 全局实例上挂载属性方法案例讲解