在Vue中，我們常常需要引入一些第三方插件或者自己編寫的JavaScript文件來實(shí)現(xiàn)一些功能。當(dāng)我們需要在多個(gè)Vue組件中使用同一段JavaScript代碼時(shí)，我們可以通過全局引入的方式來簡(jiǎn)化代碼的編寫和維護(hù)。

// main.js文件中
import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 引入需要全局使用的JavaScript文件
import './assets/js/common.js'
Vue.config.productionTip = false
new Vue({
router,
render: h =>h(App),
}).$mount('#app')

在上面的代碼中，我們通過import引入了一個(gè)common.js的文件，并通過import './assets/js/common.js'的方式將該文件進(jìn)行全局引入。這樣，我們就可以在我們的Vue實(shí)例中的任意組件中使用common.js中的方法和變量了。

下面我們來看一下common.js文件的內(nèi)容

// common.js文件中
const GlobalVariable = {
apiUrl: 'http://www.example.com',    // API請(qǐng)求地址
cookieName: 'mycookie'              // Cookie名稱
}
const GlobalMethod = {
getCookie (name) {
let arr
let reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)')
if (arr = document.cookie.match(reg)) {
return unescape(arr[2])
} else {
return null
}
}
}
export {
GlobalVariable,
GlobalMethod
}

在common.js文件中，我們定義了一個(gè)對(duì)象GlobalVariable和一個(gè)方法對(duì)象GlobalMethod。在Vue組件中，我們就可以通過以下兩種方式來使用這些變量和方法了。

1. 方式一：在Vue組件中使用$global

// 在Vue組件中使用$global
export default {
created () {
console.log(this.$global.apiUrl)            // http://www.example.com
console.log(this.$global.GlobalMethod())   // 調(diào)用GlobalMethod中的getCookie方法
}
}

Vuex中也可以使用類似的方式來全局引入JavaScript文件。我們可以將一個(gè)JavaScript文件放到store目錄下，并通過store/index.js文件來進(jìn)行全局引入。

// store/index.js文件中
import Vue from 'vue'
import Vuex from 'vuex'
import GlobalFunction from './GlobalFunction.js'
Vue.use(Vuex)
export default new Vuex.Store({
state: {},
getters: {},
mutations: {},
actions: {},
modules: {
// 在這里進(jìn)行全局引入，通過this.$store.getters方法來獲取
GlobalFunction
}
})

在上面的代碼中，我們通過import GlobalFunction from './GlobalFunction.js'將GlobalFunction.js文件進(jìn)行了全局引入，并將其作為一個(gè)模塊注入到了Vuex實(shí)例的modules屬性中。這樣，在我們的Vue組件中，我們就可以通過this.$store.getters.GlobalFunction中來使用GlobalFunction.js文件中的方法了。

全局引入JavaScript文件可以極大地簡(jiǎn)化Vue組件中的代碼結(jié)構(gòu)，減少了Vue組件的復(fù)雜性，提高了代碼的可讀性和維護(hù)性。但需要注意的是，全局引入的JavaScript文件的代碼應(yīng)該簡(jiǎn)單明了，不應(yīng)該過于復(fù)雜，以免在Vue應(yīng)用中產(chǎn)生副作用，影響應(yīng)用的穩(wěn)定性和性能。