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如何定义：全局变量、全局方法相关推荐

js定义全局变量 vue页面_详解Vue.js 定义全局变量的几种实现方式
详解Vue.js 定义全局变量的几种实现方式发布于 2020-8-11| 复制链接本篇文章主要介绍了VUE 全局变量的几种实现方式,小妖觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小妖 ...
js定义全局变量 vue页面_vue + typescript，定义全局变量或者方法
众所周知,在 vue中,如果想定义一个全局变量的方法很简单,直接在 vue的原型上挂载属性或者方法即可. 但是,加上了typescript之后, Vue.prototype.$xxx = xxx 这 ...
在vue项目中如何定义全局变量全局函数
原文定义全局变量原理: 设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用export default 暴露出去,在main.js里面使用Vue.prototype挂载到vue实例 ...
Vue中定义全局变量与常量的各种方式详解_vue.js_脚本之家
前言本文主要跟大家介绍了关于Vue定义全局变量与常量的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 我想要定义一个变量, 在项目的任何地方都可以访问到, 不需要每一次使用 ...
vue.js—定义全局变量、函数
废话不多说,直接上代码,以便以后学习查看... 一.全局变量原理: 单独新建一个全局变量模块文件,模块中定义一些变量初始状态,用export default 暴露出去. 在main.js中引入,并通 ...
Vue3.0如何在setup中获取定义的全局方法
有些情况下我们需要定义全局方法然而在vue3.0中我们定义全局方法需要在globalProperties上面定义大部分情况下还是可以定义在main.js中的我们这里就以定义在main.js中为例 ...
vue.js定义全局变量
在此次VUE项目中需要使用到全局变量.在此记录一下我的解决方法. 在main.js文件里面直接定义全局变量,如: //全局变量 Vue.prototype.host = "http://19 ...
Vue项目定义js公用方法
1.使用脚手架搭建vue项目 2.创建一个新的js文件,文件位置根据个人习惯来放接下来编写这个js文件,我是用来去掉富文本编辑器自带的标签和样式 // 将获取的富文本编辑器转过来的html格式转文字 ...
微信小程序—使用app.js里定义的全局方法
微信小程序-使用全局方法 1.在app.js里定义全局方法,例如getData()方法 2.在index.js里使用全局方法getData() 首先获取全局let app = getApp(): 然后 ...
C | C++定义全局变量的方法
我们想定义一个全局变量,能够在多个文件中使用,举例说明比如说三个文件main.c hello.c hello.h 想在main.c和hello.c中使用一个名字为a的变量,可能大家会简单地想直接在he ...