How to define global variables in vue.js

How to define global variables in vue.js: 1. Reference the global variable module file where needed, and obtain the global variable parameter value through the variable name in the file; 2. In the [main] of the program entry .js] file, mount the [Global.vue] file to [Vue.prototype].

The operating environment of this tutorial: windows10 system, vue2.5.2, this article is applicable to all brands of computers.

【Recommended related articles: vue.js】

How to define global variables in vue.js:

Principle: Set a dedicated global variable module file. Define the initial state of some variables in the module, expose it with export default, and use Vue.prototype in main.js to mount it to the vue instance or When you need to use it elsewhere, just introduce this module.

Global variable module file:

Global.vue file

<script>
const serverSrc=&#39;www.baidu.com&#39;;
const token=&#39;12345678&#39;;
const hasEnter=false;
const userSite="中国钓鱼岛";
  export default
  {
    userSite,//用户地址
    token,//用户token身份
    serverSrc,//服务器地址
    hasEnter,//用户登录状态
  }
</script>

Method 1: Reference the global variable module file where needed, and then pass The variable name in the file gets the global variable parameter value.

    <template>
        <div>{{ token }}</div>
    </template>
     
    <script>
    import global_ from &#39;../../components/Global&#39;//引用模块进来
    export default {
     name: &#39;text&#39;,
    data () {
        return {
             token:global_.token,//将全局变量赋值到data里面，也可以直接使用global_.token
            }
        }
    }
    </script>
    <style scoped>
    </style>

Method 2: In the main.js file at the program entrance, mount the above Global.vue file to Vue.prototype.

    import global_ from './components/Global'//引用文件
    Vue.prototype.GLOBAL = global_//挂载到Vue实例上面

Then there is no 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: &#39;text&#39;,
        data () {
            return {
                 token:this.GLOBAL.token,//直接通过this访问全局变量。
                }
            }
    }
</script>
<style scoped>
</style>

Related free learning recommendations: JavaScript (video)

The above is the detailed content of How to define global variables in vue.js. For more information, please follow other related articles on the PHP Chinese website!