How to set global variables in vue2? (detailed tutorial)
Below I will share with you an article on how to set vue2 global variables. It has a good reference value and I hope it will be helpful to everyone.
Recently, while learning VUE.js, JS global variables are involved. Rather than being VUE’s global variables, it is better to say they are global variables for modular JS development.
1. Special module for global variables
uses a specific module to organize and manage these global variables. You can import this module wherever you need to reference it. good.
Special module for global variables Global.vue
<script type="text/javascript"> const colorList = [ '#F9F900', '#6FB7B7', '#9999CC', '#B766AD', '#B87070', '#FF8F59', '#FFAF60', '#FFDC35', '#FFFF37', '#B7FF4A', '#28FF28', '#1AFD9C', '#00FFFF', '#2894FF', '#6A6AFF', '#BE77FF', '#FF77FF', '#FF79BC', '#FF2D2D', '#ADADAD' ] const colorListLength = 20 function getRandColor () { var tem = Math.round(Math.random() * colorListLength) return colorList[tem] } export default { colorList, colorListLength, getRandColor } </script>
The variables in the module are exposed through export. When they need to be used elsewhere, just introduce the module global.
Modules that need to use global variables html5.vue
<template> <ul> <template v-for="item in mainList"> <p class="projectItem" :style="'box-shadow:1px 1px 10px '+ getColor()"> <router-link :to="'project/'+item.id">  <span>{{item.title}}</span> </router-link> </p> </template> </ul> </template> <script type="text/javascript"> import global_ from 'components/tool/Global' export default { data () { return { getColor: global_.getRandColor, mainList: [ { id: 1, img: require('../../assets/rankIcon.png'), title: '登录界面' }, { id: 2, img: require('../../assets/rankIndex.png'), title: '主页' } ] } } } </script> <style scoped type="text/css"> .projectItem { margin: 5px; width: 200px; height: 120px; /*border:1px soild;*/ box-shadow: 1px 1px 10px; } .projectItem a { min-width: 200px; } .projectItem a span { text-align: center; display: block; } </style>
2. Mount the global variable module into Vue.prototype.
Same as above for Global.js, add the following code to main.js at the program entrance
import global_ from './components/tool/Global' Vue.prototype.GLOBAL = global_
After mounting, in the module that needs to reference the global variable, there is no need to Import the global module and reference it directly using this, as follows:
<script type="text/javascript"> export default { data () { return { getColor: this.GLOBAL.getRandColor, mainList: [ { id: 1, img: require('../../assets/rankIcon.png'), title: '登录界面' }, { id: 2, img: require('../../assets/rankIndex.png'), title: '主页' } ] } } } </script>
3. Use VUEX
Vuex is a tool specially designed for Vue State management patterns for .js application development. It uses centralized storage to manage the state of all components of the application. Therefore, global variables can be stored. Because Vuex is a bit cumbersome, it feels like overkill. I don't think it's necessary.
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
Vue’s routing dynamic redirection and navigation guard examples
JS implements adding event operations for dynamically created elements Example
Introduction to the calling sequence of functions in vue
The above is the detailed content of How to set global variables in vue2? (detailed tutorial). 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

Difference in life cycle execution order between vue2 and vue3 Life cycle comparison The execution order in vue2 beforeCreate=>created=>beforeMount=>mounted=>beforeUpdate=>updated=>beforeDestroy=>destroyed The execution order in vue3 setup=>onBeforeMount=>onMounted=> onBeforeUpdate=>onUpdated=>onBeforeUnmount=&g

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

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 diff algorithm is an efficient algorithm that compares tree nodes at the same level, avoiding the need to search and traverse the tree layer by layer. So how much do you know about the diff algorithm? The following article will give you an in-depth analysis of the diff algorithm of vue2. I hope it will be helpful to you!
![Internal error: Unable to create temporary directory [Resolved]](https://img.php.cn/upload/article/000/000/164/168171504798267.png?x-oss-process=image/resize,m_fill,h_207,w_330)
Windows system allows users to install various types of applications on your system using executable/setup files. Recently, many Windows users have started complaining that they are receiving an error named INTERNALERROR:cannotCreateTemporaryDirectory on their systems while trying to install any application using an executable file. The problem is not limited to this but also prevents the users from launching any existing applications, which are also installed on the Windows system. Some possible reasons are listed below. Run the executable to install without granting administrator privileges. An invalid or different path was provided for the TMP variable. damaged system

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

Using Ajax to obtain variables from PHP methods is a common scenario in web development. Through Ajax, the page can be dynamically obtained without refreshing the data. In this article, we will introduce how to use Ajax to get variables from PHP methods, and provide specific code examples. First, we need to write a PHP file to handle the Ajax request and return the required variables. Here is sample code for a simple PHP file getData.php:

Instance variables in Java refer to variables defined in the class, not in the method or constructor. Instance variables are also called member variables. Each instance of a class has its own copy of the instance variable. Instance variables are initialized during object creation, and their state is saved and maintained throughout the object's lifetime. Instance variable definitions are usually placed at the top of the class and can be declared with any access modifier, which can be public, private, protected, or the default access modifier. It depends on what we want this to be
