Define global variables and global function methods in the vue project

In projects, some functions and variables often need to be reused, such as the website server address, which is obtained from the background: the user's login token, the user's address information, etc. At this time, a wave of global variables and variables need to be set. Global functions, these two settings are not too difficult, and they have some things in common. Some friends may not know much about them. This article mainly introduces how to define global variables and global functions in the Vue project, which has certain reference. Value, interested friends can refer to it, I hope it can help everyone.

Define global variables

Principle:

Set a dedicated global variable module file, define some initial states of variables in the module, and use export default to expose them. Use Vue.prototype in main.js to mount it on the vue instance or when it needs to be used elsewhere, just introduce this module.

Global variable module file:

Global.vue file:

<script>
const serverSrc='www.baidu.com';
const token='12345678';
const hasEnter=false;
const userSite="中国钓鱼岛";
 export default
 {
  userSite,//用户地址
  token,//用户token身份
  serverSrc,//服务器地址
  hasEnter,//用户登录状态
 }
</script>

Usage method 1:

Reference the global variable module file where needed, Then get the global variable parameter value through the variable name in the file.

Use in text1.vue component:

<template>
  <p>{{ token }}</p>
</template>

<script>
import global_ from '../../components/Global'//引用模块进来
export default {
 name: 'text',
data () {
  return {
     token:global_.token,//将全局变量赋值到data里面，也可以直接使用global_.token
    }
  }
}
</script>
<style lang="scss" scoped>

</style>

Usage method 2:

In the main.js file at the program entrance, mount the above Global.vue file to Vue.prototype.

import global_ from './components/Global'//引用文件
  Vue.prototype.GLOBAL = global_//挂载到Vue实例上面

Then there is no need to reference the Global.vue module file in the entire project. You can directly access the global variables defined in the Global file through this.

text2.vue：

<template>
  <p>{{ token }}</p>
</template>

<script>
export default {
 name: 'text',
data () {
  return {
     token:this.GLOBAL.token,//直接通过this访问全局变量。
    }
  }
}
</script>
<style lang="scss" scoped>
</style>

Vuex can also set global variables:

Use vuex to store global variables. There are many things here and they are relatively complicated. If you are interested Friends, you can check the information by yourself, and after a while,

Define global functions

Principle

Create a new module file, and then pass Vue.prototype in main.js Mount the function to the Vue instance and run the function through this.function name.

1. Write functions directly in main.js

Simple functions can be written directly in main.js

Vue.prototype.changeData = function (){//changeData是函数名
 alert('执行成功');
}

Called in the component:

this.changeData();//直接通过this运行函数

2. Write a module file and mount it on main.js.

base.js file, the file location can be placed at the same level as main.js for easy reference

exports.install = function (Vue, options) {
  Vue.prototype.text1 = function (){//全局函数1
  alert('执行成功1');
  };
  Vue.prototype.text2 = function (){//全局函数2
  alert('执行成功2');
  };
};

main.js entry file:

import base from './base'//引用
  Vue.use(base);//将全局函数当做插件来进行注册

Called in the component:

this.text1();
  this.text2();

Afterword

The above is how to define global variables and global functions. The global variables and global functions here are not limited to vue projects. vue-cli uses webpack for modularization. In other modular development, the routines for defining global variables and functions are basically the same. The above is only about global variables and global functions. I hope that reading this article can give you some help.

Related recommendations:

About the differences between global variables global and $GLOBALS in PHP - WORSHIP Yasa

php global variables What are super global variables

How does vue use global variables

The above is the detailed content of Define global variables and global function methods in the vue project. For more information, please follow other related articles on the PHP Chinese website!