How to define global variables and global functions and vue global variables in the vue Project

How to define global variables and global functions and vue global variables in the vue Project

Preface:

For example, in projects, some functions and variables often need to be reused, such as the website server address, the logon token obtained from the background, and the user's address information, at this time, we need to set a wave of global variables and global functions. These two settings are not very difficult, and there are some commonalities. Some may not know much about them, so I just want to write them out and share them with others. If you have any need, you can make a reference. If you like it, you can click likes or pay attention to them. I hope they can help you.

Define global variables

Principle:

Set a dedicated global variable module file, which defines the initial state of some variables and exposes them with export default. use Vue in js. this module can be introduced when prototype is attached to a vue instance or needs to be used elsewhere.

Global variable module file:

Global. vue file:

<Script> const serverSrc = 'www .baidu.com '; const token = '000000'; const hasEnter = false; const userSite = "China Diaoyu Islands"; export default {userSite, // user address token, // User token identity serverSrc, // server address hasEnter, // User Logon status} </script>

Method 1:

Reference the global variable module File as needed, and obtain the global variable parameter value through the variable name in the file.

Use the following in the text1.vue component:

<Template> <div >{{ token }}</div> </template> <script> import global _ from '.. /.. /components/Global '// reference module export default {name: 'text', data () {return {token: global _. token, // assign the global variable to the data. You can also directly use global _. token }}</script> <style lang = "scss" scoped> </style>

Method 2:

In the main. js file of the program entry, mount the above Global. vue file to Vue. prototype.

Import global _ from './components/global' // reference file Vue. prototype. Global = GLOBAL _ // mount to Vue instance

Then, you do not 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> <div >{{ token }}</div> </template> <script> export default {name: 'text', data () {return {token: this. GLOBAL. token, // access global variables directly through this. }}}</Script> <style lang = "scss" scoped> </style>

You can also set global variables for Vuex:

Vuex is used to store global variables. There are many things here and they are relatively complicated. Interested friends can check their own materials and make a great deal of changes,

Define global functions

Principle

Create a new module File, mount the function to the Vue instance through Vue. prototype in main. js, and run the function using this. function name.

1. Write the function directly in main. js.

Simple functions can be directly written in main. js.

Vue. prototype. changeData = function () {// changeData is the function name alert ('execution successfully ');}

Call in components:

This. changeData (); // run the function directly through this

2. Write a module File and mount it to main. js.

Base. js file, which can be placed at the same level as main. js to facilitate reference

Exports. install = function (Vue, options) {Vue. prototype. text1 = function () {// global function 1 alert ('execution successful 1') ;}; Vue. prototype. text2 = function () {// global function 2 alert ('execution successful 2 ');};};

Main. js entry file:

Import base from './base' // reference Vue. use (base); // register a global function as a plug-in.

Call in the component:

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

Remarks

The above is how to define the global function of global variables. The global function of global variables is not limited to vue projects. vue-cli is modularized by webpack and other modules, the routine for defining global variables and functions is basically the same. The above is only for global variables. The hope of global functions can be helpful to you after reading this article.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.