浅谈在vue项目中如何定义全局变量和全局函数

在Vue项目中定义全局变量和全局函数有很多种方法，以下是其中两种常用的方法：

方法一：Vue.prototype

Vue.prototype可以在Vue的实例中定义公共的实例属性和方法，这样在整个项目中都可以使用。

定义全局变量

在main.js中定义全局变量例如baseUrl：

import Vue from 'vue'
import App from './App.vue'

Vue.prototype.baseUrl = 'http://www.example.com'

new Vue({
  render: h => h(App)
}).$mount('#app')

可以通过this.baseUrl来获取全局变量baseUrl。

定义全局函数

在main.js中定义全局函数例如getUrlParam：

import Vue from 'vue'
import App from './App.vue'

Vue.prototype.getUrlParam = function (name) {
  let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
  let r = window.location.search.substr(1).match(reg)
  if (r != null) return unescape(r[2])
  return null
}

new Vue({
  render: h => h(App)
}).$mount('#app')

可以通过this.getUrlParam('name')来调用全局函数getUrlParam。

方法二：Vue.use

Vue.use可以在Vue中使用插件，插件可以是一个函数或者一个包含install方法的对象。

定义全局变量

定义全局变量需要编写Plugin插件。例如：

const Plugin = {
  install(vue) {
    vue.prototype.$baseUrl = 'http://www.example.com'
  }
}

export default Plugin

在main.js中使用插件：

import Vue from 'vue'
import App from './App.vue'
import Plugin from './plugins/Plugin.js'

Vue.use(Plugin)

new Vue({
  render: h => h(App)
}).$mount('#app')

可以通过this.$baseUrl来获取全局变量baseUrl。

定义全局函数

定义全局函数需要编写Plugin插件。例如：

const Plugin = {
  install(vue) {
    vue.prototype.$getUrlParam = function (name) {
      let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
      let r = window.location.search.substr(1).match(reg)
      if (r != null) return unescape(r[2])
      return null
    }
  }
}

export default Plugin

在main.js中使用插件：

import Vue from 'vue'
import App from './App.vue'
import Plugin from './plugins/Plugin.js'

Vue.use(Plugin)

new Vue({
  render: h => h(App)
}).$mount('#app')

可以通过this.$getUrlParam('name')来调用全局函数getUrlParam。