Vue挂载全局方法

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

#### 简介：有时候，频繁调用的函数，我们需要把它挂载在全局的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方法挂载成功 ####

![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

发表评论取消回复

表情：

评论列表（有 0 条评论，61人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue挂载全局方法

通过this.$db调用指定方法

阳光穿透心脏的1/2处/ 2024年04月22日 22:30/ 0 赞/ 62 阅读

相关 Vue全局定义方法

简单介绍一下Vue全局定义方法以及如何使用！ 1、首先在src目录下新建一个commonjs（用来写多个js文件） ![包含方法的js文件][js] 2、文件内部安排

爱被打了一巴掌/ 2023年10月11日 14:26/ 0 赞/ 38 阅读

相关将vue methods方法挂载到全局window对象，给app端或后台使用 vue项目

通过jsBridge方法，H5可以调用客户端（ios，android）的内部方法，同样，客户端也需要能调用H5页面里定义的js方法，但是在vue里，所有的方法都是在组件内部声明

╰半橙微兮°/ 2023年02月17日 02:52/ 0 赞/ 1 阅读

相关 22.uniapp封装$myRequest方法并挂载全局

一.首先 api.js 里面写需要封装的接口 const BASEE_URL = 'http://localhost:8082' // 封装发送

我不是女神ヾ/ 2023年01月14日 01:57/ 0 赞/ 227 阅读

相关 Vue3.0挂载方法，添加全局属性

根据官方文档描述 `app.config`是一个包含了 Vue 应用全局配置的对象。你可以在应用挂载前修改其属性，方法。 `main.js` // 之前(Vu

古城微笑少年丶/ 2022年12月31日 14:23/ 0 赞/ 416 阅读

相关 vue项目注册全局方法

vue项目注册全局方法可使用$on和$root结合使用本案例是在App.vue中注册了一个全局方法 1，在App.vue中created()方法中注册一个方法

太过爱你忘了你带给我的痛/ 2022年12月30日 13:40/ 0 赞/ 186 阅读

相关 Vue3---Vue3中如何进行全局挂载

main.js中通过 config.globalProperties 进行全局挂载 import { createApp } from 'vue' im

蔚落/ 2022年10月29日 10:22/ 0 赞/ 482 阅读

相关 Vue3.0学习 - 第十四节，Vue3 挂载全局变量方法，在Vue3中使用vue-cookies

[关于vue3.x挂载全局变量方法官方文档][vue3.x] `Vue.prototype` 替换为 `config.globalProperties` 在 Vue

╰+攻爆jí腚メ/ 2022年10月17日 01:35/ 0 赞/ 3 阅读

相关 vue创建全局变量以及全局方法

在main.js中 // 引入封装好的js文件的路径 import aa from './//' // 把全局js挂接到vue原型上

以你之姓@/ 2021年10月19日 04:14/ 0 赞/ 416 阅读

相关 uniapp实战——-封装$myRequest方法并挂载到全局

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

素颜马尾好姑娘i/ 2021年07月25日 22:02/ 0 赞/ 360 阅读