Web Front-end
JS Tutorial
Define global variables and global function methods in the vue project
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
A guide to using Windows 11 and 10 environment variables for profiling
Nov 01, 2023 pm 08:13 PM
Environment variables are the path to the location (or environment) where applications and programs run. They can be created, edited, managed or deleted by the user and come in handy when managing the behavior of certain processes. Here's how to create a configuration file to manage multiple variables simultaneously without having to edit them individually on Windows. How to use profiles in environment variables Windows 11 and 10 On Windows, there are two sets of environment variables – user variables (apply to the current user) and system variables (apply globally). However, using a tool like PowerToys, you can create a separate configuration file to add new and existing variables and manage them all at once. Here’s how: Step 1: Install PowerToysPowerTo
iOS 17: How to change iPhone clock style in standby mode
Sep 10, 2023 pm 09:21 PM
Standby is a lock screen mode that activates when the iPhone is plugged into the charger and oriented in horizontal (or landscape) orientation. It consists of three different screens, one of which is displayed full screen time. Read on to learn how to change the style of your clock. StandBy's third screen displays times and dates in various themes that you can swipe vertically. Some themes also display additional information, such as temperature or next alarm. If you hold down any clock, you can switch between different themes, including Digital, Analog, World, Solar, and Floating. Float displays the time in large bubble numbers in customizable colors, Solar has a more standard font with a sun flare design in different colors, and World displays the world by highlighting
Strict mode for variables in PHP7: how to reduce potential bugs?
Oct 19, 2023 am 10:01 AM
Strict mode was introduced in PHP7, which can help developers reduce potential errors. This article will explain what strict mode is and how to use strict mode in PHP7 to reduce errors. At the same time, the application of strict mode will be demonstrated through code examples. 1. What is strict mode? Strict mode is a feature in PHP7 that can help developers write more standardized code and reduce some common errors. In strict mode, there will be strict restrictions and detection on variable declaration, type checking, function calling, etc. Pass
The definition and function of MySQL composite primary key
Mar 15, 2024 pm 05:18 PM
The composite primary key in MySQL refers to the primary key composed of multiple fields in the table, which is used to uniquely identify each record. Unlike a single primary key, a composite primary key is formed by combining the values of multiple fields. When creating a table, you can define a composite primary key by specifying multiple fields as primary keys. In order to demonstrate the definition and function of composite primary keys, we first create a table named users, which contains three fields: id, username and email, where id is an auto-incrementing primary key and user
What is Discuz? Definition and function introduction of Discuz
Mar 03, 2024 am 10:33 AM
"Exploring Discuz: Definition, Functions and Code Examples" With the rapid development of the Internet, community forums have become an important platform for people to obtain information and exchange opinions. Among the many community forum systems, Discuz, as a well-known open source forum software in China, is favored by the majority of website developers and administrators. So, what is Discuz? What functions does it have, and how can it help our website? This article will introduce Discuz in detail and attach specific code examples to help readers learn more about it.
How to make custom borders in Microsoft Word
Nov 18, 2023 pm 11:17 PM
Want to make the front page of your school project look exciting? Nothing makes it stand out from other submissions like a nice, elegant border on the homepage of your workbook. However, the standard single-line borders in Microsoft Word have become very obvious and boring. Therefore, we show you the steps to create and use custom borders in Microsoft Word documents. How to Make Custom Borders in Microsoft Word Creating custom borders is very easy. However, you will need a boundary. Step 1 – Download Custom Borders There are tons of free borders on the internet. We have downloaded a border like this. Step 1 – Search the Internet for custom borders. Alternatively, you can go to clipping
Mind map of Python syntax: in-depth understanding of code structure
Feb 21, 2024 am 09:00 AM
Python is widely used in a wide range of fields with its simple and easy-to-read syntax. It is crucial to master the basic structure of Python syntax, both to improve programming efficiency and to gain a deep understanding of how the code works. To this end, this article provides a comprehensive mind map detailing various aspects of Python syntax. Variables and Data Types Variables are containers used to store data in Python. The mind map shows common Python data types, including integers, floating point numbers, strings, Boolean values, and lists. Each data type has its own characteristics and operation methods. Operators Operators are used to perform various operations on data types. The mind map covers the different operator types in Python, such as arithmetic operators, ratio
Introduction to PHP interfaces and how to define them
Mar 23, 2024 am 09:00 AM
Introduction to PHP interface and how it is defined. PHP is an open source scripting language widely used in Web development. It is flexible, simple, and powerful. In PHP, an interface is a tool that defines common methods between multiple classes, achieving polymorphism and making code more flexible and reusable. This article will introduce the concept of PHP interfaces and how to define them, and provide specific code examples to demonstrate their usage. 1. PHP interface concept Interface plays an important role in object-oriented programming, defining the class application
