How to declare global variables in vue.js

The method of declaring global variables in vue.js: first set up a dedicated global variable module file, and define some initial states of variables in the module; then use export default to expose them; finally use [main.js] in [main.js] Vue.prototype] is mounted on the vue instance and the module is introduced.

The operating environment of this tutorial: windows7 system, vue2.9 version, this method is suitable for all brands of computers.

Vue.js method of declaring global variables:

Define global variables

Principle: Set a dedicated global variable module file in the module Define the initial state of some variables, expose them using export default, and use Vue.prototype in main.js to mount them on the vue instance or when you need to use them 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 obtain it through the variable name in the file 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 declare global variables in vue.js. For more information, please follow other related articles on the PHP Chinese website!