最新消息: 新版网站上线了!!!

vue项目中定义全局变量、函数的几种方法

前言

在项目中,经常会复用一些变量和函数,比如用户的登录token,用户信息等。这时将它们设为全局的就显得很重要了,全局变量和全局函数之间有一些相通之处,它们其实很简单,但是有些人可能还不太了解。简单总结分享一波,希望对你有所帮助。

定义全局变量

原理:使用模块(.js或.vue文件)来管理全局变量,最后使用export暴露出去 (最好导出的格式为对象,方便在其他地方调用),当其它地方需要使用时,用import导入该模块

1、使用全局变量专用模块,挂载到main.js文件上面

全局变量模块Global.vue定义如下:

const token='12345678';
const userStatus=false;
export default {
  token, // 用户token身份
  userStatus // 用户登录状态
}

模块里的变量用export暴露出去,当其它地方需要使用时,引入模块便可。

使用全局变量:

import global from '../../components/Global'//引用模块进来
export default {
data () {
  return {
     token:global.token,//将全局变量赋值到data里面
    }
  }
}

2、全局变量模块挂载到Vue.prototype上

Global.vue文件同上,在项目入口的main.js里配置:

import global from '../../components/Global'
Vue.prototype.GLOBAL = global

挂载之后,在需要引用全局变量的模块处,不需再导入全局变量模块,而是直接用this就可以引用了,如下:

export default {
 data () {
  return {
   token: this.GLOBAL.token,
  }
 }
}

方法一跟方法二的主要区别是,方法二全局只需要导入一次就可以,简单方便。

3、使用vuex定义全局变量

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。因此可以存放着全局量。

// index.js文件里定义vuex
import state from './state'
export default new Vuex.Store({
 actions,
 getters,
 mutations,
 state,
})
// state.js里面存放全局变量,并且暴露出去
const state = {
 token:'12345678',
 language: 'en',
}

export default state

使用的时候,在需要引用全局变量的模块处直接使用this.$store调用

export default {
  methods: {
   getInternation() {
    if (this.$store.state.language === 'en') {
     this.internation = 2
    } else if (this.$store.state.language === 'zh_CN') {
     this.internation = 1
    }
   }
  } 
}

因为Vuex有点繁琐,有点杀鸡用牛刀的感觉。因此认为并没有必要使用它。上面只是简单的使用,如果想要具体了解使用方式,可以去查阅资料具体掌握。

定义全局函数

原理:在main.js里面通过Vue.prototype将函数挂载到Vue实例上面,通过this.函数名,来运行函数。

1、在main.js文件直接定义方法

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

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

使用的时候组件里直接调用。

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

2、使用全局函数专用模块,挂载到main.js上面

base.js文件,文件位置可以放在跟main.js同一级,方便引用(这点可以依据个人习惯决定)。

exports.install = function (Vue, options) {
  Vue.prototype.changeData = function (){
    alert('执行成功');
  };
};

main.js引入并使用。

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

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

this.changeData();

结语

以上是vue中全局变量和全局函数使用的全部内容。希望总结的东西对你有所帮组。还不太了解的可以多看几遍,大家加油!!!也希望大家多多支持谷谷点程序。

.....

转载请注明:谷谷点程序 » vue项目中定义全局变量、函数的几种方法