vue如何定义全局变量和全局方法实例代码

 更新时间:2023年04月24日 11:39:46   作者:郑建007  
在项目中经常会复用一些变量和函数,比如用户的登录token,用户信息等,这时将它们设为全局的就显得很重要了,下面这篇文章主要给大家介绍了关于vue如何定义全局变量和全局方法的相关资料,需要的朋友可以参考下

开发中会经常用到一些常用的变量和方法   例如ajax这种

一、给vue定义全局变量

1.定义专用模块来配置全局变量

定义一个专用模块来配置全局变量,然后通过export暴露出去,在需要的组件引入global.vue

// 定义一些公共的属性和方法
const httpUrl = 'http://test.com'
// 暴露出这些属性
export default {
    httpUrl,
}

 引入及使用

<script>
    // 导入共用组件
    import global from './global.vue'
    export default {
        data () {
            return {
                //使用
                globalUrl: global.httpUrl
            }
        }
    }
</script>

2.通过全局变量挂载到Vue.prototype

同上,定义一个专用模块来配置全局变量,然后通过export暴露出去,在需要的组件引入global.vue

// 定义一些公共的属性和方法
const httpUrl = 'http://test.com'
// 暴露出这些属性
export default {
    httpUrl,
}

在main.js中引入并复制给vue

// 导入共用组件
import global from './global.vue'
Vue.prototype.global = global

组件调用

export default {
    data () {
        return {
           // 赋值使用, 可以使用this变量来访问
           globalHttpUrl: this.global.httpUrl
    }
}

3.使用vuex

安装:

npm install vuex --save

新建store.js文件

import Vue from 'vue' 
import Vuex from 'vuex'; 
Vue.use(Vuex); 
export default new Vuex.Store({ 
    state:{ httpUrl:'http://test.com' } 
})

main.js中引入

import store from './store' 
new Vue({
    el: '#app', 
    router, 
    store, 
    components: { App }, 
    template: '<App/>' 
});

组件内调用

console.log(this.$store.state.httpUrl)

二、给vue定义全局方法

1.将方法挂载到 Vue.prototype 上面

简单的函数可以直接写在main.js文件里定义。

// 将方法挂载到vue原型上
Vue.prototype.changeData = function (){
  alert('执行成功');
}

使用方法

//直接通过this运行函数,这里this是vue实例对象
this.changeData();

2. 利用全局混入 mixin

新建一个mixin.js文件

export default {
    data() {
 
    },
    methods: {
        randomString(encode = 36, number = -8) {
            return Math.random() // 生成随机数字,
                .toString(encode) // 转化成36进制
                .slice(number) 
        }
    }
}

// 在项目入口 main.js 里配置

import Vue from 'vue'
import mixin from '@/mixin'
 
Vue.mixin(mixin)

// 在组件中使用

export default {
    mounted() {
        this.randomString()
    }
}

3. 使用插件方式

plugin.js文件,文件位置可以放在跟main.js同一级,方便引用

exports.install = function (Vue, options) {
    Vue.prototype.test = function (){
        console.log('test');
    };
};

main.js引入并使用。

import plugin from './plugin'
Vue.use(plugin);

所有的组件里就可以调用该函数。

this.test();

总结

到此这篇关于vue如何定义全局变量和全局方法的文章就介绍到这了,更多相关vue定义全局变量和全局方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue3从0搭建Vite打包组件库使用详解

    Vue3从0搭建Vite打包组件库使用详解

    这篇文章主要为大家介绍了Vue3从0搭建Vite打包组件库使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • Vue项目中如何运用vuex的实战记录

    Vue项目中如何运用vuex的实战记录

    如果说是JQuery是手工作坊,那么Vue.js就像是一座工厂,虽然Vue.js做的任何事情JQuery都可以做,但无论是代码量还是流程规范性都是前者较优,下面这篇文章主要给大家介绍了关于Vue项目中如何运用vuex的相关资料,需要的朋友可以参考下
    2021-09-09
  • Vue引用vee-validate插件表单验证问题(cdn方式引用)

    Vue引用vee-validate插件表单验证问题(cdn方式引用)

    这篇文章主要介绍了Vue引用vee-validate插件表单验证问题(cdn方式引用),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • 详解如何实现在Vue中导入Excel文件

    详解如何实现在Vue中导入Excel文件

    这篇文章主要介绍了如何在Vue中导入Excel文件,文中的示例代码讲解详细,对我们学习或工作有一定帮助,感兴趣的小伙伴可以跟随小编一起了解一下
    2022-01-01
  • vue实现电子时钟效果

    vue实现电子时钟效果

    这篇文章主要为大家详细介绍了vue实现电子时钟效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • van-dialog 组件调用报错的解决

    van-dialog 组件调用报错的解决

    这篇文章主要介绍了van-dialog 组件调用报错的解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • vue3.0 移动端二次封装van-uploader实现上传图片(vant组件库)

    vue3.0 移动端二次封装van-uploader实现上传图片(vant组件库)

    这篇文章主要介绍了vue3.0 移动端二次封装van-uploader上传图片组件,此功能最多上传6张图片,并可以实现本地预览,实现代码简单易懂,需要的朋友可以参考下
    2022-05-05
  • vue3中实现使用element-plus调用message

    vue3中实现使用element-plus调用message

    这篇文章主要介绍了vue3中实现使用element-plus调用message,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)

    Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)

    这篇文章主要介绍了Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • 分享vue里swiper的一些坑

    分享vue里swiper的一些坑

    这篇文章主要介绍了vue里swiper的一些坑及swiper在vue中的使用,本文分步骤给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-08-08

最新评论