Several methods for defining global variables and functions in vue project

Preface

In projects, some variables and functions are often reused, such as user login tokens, user information, etc. It is important to set them global at this time. There are some similarities between global variables and global functions. They are actually very simple, but some people may not understand them very much. I will give you a brief summary and share it, I hope it will be helpful to you.

Define global variables

Principle: Use modules (.js or .vue files) to manage global variables, and finally use export to expose them (it is best to export the format as an object, which is convenient for calling in other places). When you need to use it in other places, use import to import the module.

1. Use a global variable dedicated module to mount it on the file

The global variable module is defined as follows:

const token='12345678';
const userStatus=false;
export default {
  token, // User token identity  userStatus // User login status}

Variables in the module are exposed using export. When other places need to be used, you can introduce the module.

Use global variables:

import global from '../../components/Global'//Reference module comes inexport default {
data () {
  return {
     token:,// Assign global variables to data    }
  }
}

2. The global variable module is mounted on

The file is the same as above, configure it in the project entrance:

import global from '../../components/Global'
 = global

After mounting, at the module that needs to reference global variables, there is no need to import the global variable module, but you can directly use this to reference it, as follows:

export default {
 data () {
  return {
   token: ,
  }
 }
}

The main difference between method one and method two is that method two only needs to be imported globally once, which is simple and convenient.

3. Use vuex to define global variables

Vuex is a state management model developed specifically for applications. It uses centralized storage to manage the state of all components of the application. Therefore, the global quantity can be stored.

// Define vuex in the fileimport state from './state'
export default new ({
 actions,
 getters,
 mutations,
 state,
})
// Store global variables and expose themconst state = {
 token：'12345678',
 language: 'en',
}

export default state

When using it, use this.$store directly to call it in the module that needs to reference global variables

export default {
  methods: {
   getInternation() {
    if (this.$ === 'en') {
      = 2
    } else if (this.$ === 'zh_CN') {
      = 1
    }
   }
  } 
}

Because Vuex is a bit cumbersome, it feels like killing a chicken and using a slaughter. Therefore, it is not believed that it is necessary to use it. The above is just a simple use. If you want to know the usage method, you can check the information and learn it in detail.

Define global functions

Principle: Run the function by mounting the function onto the Vue instance and using this. function name.

1. Define the method directly in the file

Simple functions can be written directly in a file to define.

// Mount the method on the vue prototype = function (){
 alert('Execution was successful');
}

When used, call it directly in the component.

//Run the function directly through this, here this is a vue instance object();

2. Use global function dedicated modules to mount them on

The file location can be placed at the same level for easy reference (this can be determined based on personal habits).

 = function (Vue, options) {
   = function (){
    alert('Execution was successful');
  };
};

Introduced and used.

import base from './base'
(base);

This function can be called in all components.

();

Conclusion

The above is all the content used by global variables and global functions in vue. I hope the summary will help you. If you don’t know much, you can read it a few more times. Come on, everyone! ! ! I also hope everyone supports me.