Write in front:

In a project, there are often some functions and variables that need to be reused, such as the website server address, retrieved from the background: User login token, user address information, and so on, at this time need to set a wave of global variables and global functions, these two Settings are not too difficult, and there are some common points, maybe some friends do not understand this, so write freely to share a wave. Friends in need can make a reference, like you can point bozan, or pay attention to it, I hope to help you.

This post was originally posted on my blog:obkoro1.com

Defining global variables

Principle:

Set up a dedicated global variable module file, which defines some initial state of the variables, exposes it with export Default, and uses vue. prototype in main.js to mount it on the Vue instance, or when needed elsewhere.

Global variable module file:

Global. Vue file:

<script>
const serverSrc='www.baidu.com';
const token='12345678';
const hasEnter=false;
const userSite="Diaoyu Islands, China";
  exportDefault {userSite,// user address token,// user token identity serverSrc,// server address hasEnter,// user login status}Copy the code

Mode of use 1:

Reference the global variable module file where needed, and then get the global variable parameter values from the variable names in the file.

Used in the text1.vue component:

<template>
    <div>{{ token }}</div>
</template>

<script>
import global_ from '.. /.. /components/Global'// Reference the module inexport default {
 name: 'text'.data () {
    return{token:global_.token,// Assign global variables to data, you can also use global_.token}} </script> <style lang="scss" scoped>

</style>Copy the code

Mode of use 2:

In the main.js file of the entry, mount the global. vue file to vue. prototype.

    import global_ from './components/Global'// Reference file vue.prototype. GLOBAL = global_// mount it to the Vue instanceCopy the code

You can then use this to access Global variables defined in the Global file without referring to the global.vue module file.

Text2. Vue:

<template>
    <div>{{ token }}</div>
</template>

<script>
export default {
 name: 'text'.data () {
    return{token: this. GLOBAL token, / / directly through this access to GLOBAL variables. } } } </script> <style lang="scss" scoped>
</style>Copy the code

Vuex can also set global variables:

Vuex to store global variables, here things are more, is relatively complex, interested partners, you can consult the information, a wave,

Defining global functions

The principle of

Create a new module file and mount the function to the Vue instance via vue. prototype in main.js, via this. Function name, to run the function.

1. Write functions directly inside main.js

Simple functions can be written directly in main.js

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

Component calls:

this.changeData(); // Run the function directly through thisCopy the code

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

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

exports.install = function (Vue, options) {
   Vue.prototype.text1 = function(){// global function 1 alert()'Executed successfully 1');
    };
    Vue.prototype.text2 = function(){// global function 2 alert()'Executed successfully 2');
    };
};Copy the code

Main.js entry file:

    import base from './base'/ / reference Vue. Use (base); // Register global functions as plug-insCopy the code

Component calls:

    this.text1();
    this.text2();Copy the code

The latter

Above is how to define the global variable global function content, here global variable global function can not be limited to vUE project, VUE – CLI is using webpack to do modular, other modular development, define global variables, function routine is basically the same. The above is just for global variables, global functions hope to read this article can give you a little help.

Finally: if need to reprint, please put the original link and signature. Code word is not easy, thank you for your support! I write articles in line with the mentality of exchange records, write bad place, do not quarrel, but welcome to give directions. Then is the hope of watching the friends point a like, can also pay attention to me. Blog site and nuggets personal homepage

The above 2017.10.23

References:

How to define the global function VUE. Use source code analysis export default