Vue中设置全局变量或方法总结

在前端开发中，经常会复用一些变量和函数，比如一些常量、变量、公用的方法，用户信息等，避免每个单页面都要引入一些复用组件和方法
，这个时候就需要将他们设为全局了。

一、vue定义设置全局变量

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

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

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

引入及使用

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

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

同上，定义一个专用模块来配置全局变量，然后通过export暴露出去，在需要的组件引入global.vue，或者把变量或方法直接定义在prototype上面

注意：在vue3版本中更改为app.config.globalProperties,使用时要先通过getCurrentInstance获取实例对象

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

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

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

组件调用

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

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)

4、webpack配置方式

我们从vue-cli文档中 找到这样一句

又在webpack中找到ProvidePlugin

我们就在 自己项目的vue.config.js中，书写配置

const path = require('path');
// 引入webpack
const  webpack = require('webpack');
module.exports = {
	//其他的配置 
	// 配置webpack相关
	configureWebpack : config => {
	// 定义全局变量
    config.plugins.push(new webpack.ProvidePlugin({
      Moment: 'moment', // 你要引入的 第三方库 
      Utils: path.resolve(__dirname, "./src/utils.js") // 组件 / 通用方法  (注意路径修改)
    }))
	}
}

重启项目，就可以在全局使用你配置好的全局变量了，不用再每个单页面引入引入

附上：上面的文档连接
vue-cli文档中使用webpack：https://cli.vuejs.org/zh/guide/webpack.html
webpack中配置全局变量：https://www.webpackjs.com/plugins/provide-plugin/

二、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)

在组件中使用

<script>
export default {
    mounted() {
        this.randomString()
    }
}
</script>

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()