How does VUE define global variables and methods

“This is the first day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021”

preface

In daily development, some variables and functions are often reused, such as some common methods, user information and so on. At this point, you need to set them to global.

Define global variables for VUE

1. Define special modules to configure global variables

Define a dedicated module to configure global variables, which are then exposed via export, importing global.vue into the required components

<script type="text/javascript">
  // Define some common properties and methods
  const httpUrl = 'http://test.com'
  // Expose these attributes
  export default {
    httpUrl,
  }
</script>
Copy the code

Introduction and use

Import global from './global.vue' export default {data () {return {// Use globalUrl: global.httpUrl } },Copy the code

2. Mount to Vue.prototype via global variables

As above, define a dedicated module to configure global variables, which are then exposed via export and imported into global.vue where necessary

<script type="text/javascript">
  // Define some common properties and methods
  const httpUrl = 'http://test.com'
  // Expose these attributes
  export default {
    httpUrl,
  }
</script>
Copy the code

Import and copy to vue in main.js

// prototype.prototype.prototype.prototype.prototype.prototype.prototype.prototype.prototype.prototype.prototype.prototype.prototype.prototype.prototype.prototype.prototype.prototype.prototype.prototypeCopy the code

Component calls

Export default {data () {return {// assign to globalHttpUrl: this.global.httpurl}},Copy the code

3. Use vuex

Installation:

npm install vuex --save
Copy the code

Create a new store.js file

import Vue from 'vue' 
import Vuex from 'vuex'; 
Vue.use(Vuex); 
export default new Vuex.Store({ 
    state:{ httpUrl:'http://test.com' } 
})
Copy the code

Introduced in the main. Js

import store from './store' 
new Vue({
    el: '#app', 
    router, 
    store, 
    components: { App }, 
    template: '<App/>' 
});
Copy the code

Intra-component invocation

console.log(this.$store.state.httpUrl)
Copy the code

Define global methods for vUE

1. Mount the method to vue.Prototype

Simple functions can be defined directly in main.js.

Prototype. ChangeData = function (){alert(' execute successfully '); }Copy the code

Method of use

// Run the function directly through this, where this is the vue instance object this.changeData();Copy the code

2. Use global mixins

Create a new mixin.js file

export default {
    data() {

    },
    methods: {
        randomString(encode = 36, number = -8) {
            return Math.random() // 生成随机数字,
                .toString(encode) // 转化成36进制
                .slice(number) 
        }
    }
}
Copy the code

// In the project entry main.js

import Vue from 'vue'
import mixin from '@/mixin'

Vue.mixin(mixin)
Copy the code

// Used in components

export default {
    mounted() {
        this.randomString()
    }
}
Copy the code

3. Use plug-ins

Plugin.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.test = function (){
        console.log('test');
    };
};
Copy the code

Main.js is introduced and used.

import plugin from './plugin'
Vue.use(plugin);
Copy the code

This function can be called from all components.

this.test();
Copy the code

conclusion

These are some common ways to make variables and methods global.

How to define global methods for Vue how to define global variables for Vue