vue--uni-app实现全局变量的三种方式

第一种：创建公共模块，需要使用变量时需要import导入即可使用。

第一步：创建common文件和common.js

const serverUrl='www.global.com';

export default{
    serverUrl
}

第二步：在需要的vue文件中import公共模块

<template>
  <div>
    <h1>{{global_serverUrl}}</h1>
    <button @click="getGlobal()">获取全局变量</button>
  </div>
</template>
<script>
import common from '../common/common.js';
export default {
  data() {
    //这里存放数据
    return {
        global_serverUrl:""
    };
  },
  //方法集合
  methods: {
    getGlobal(){
      this.global_serverUrl = common.serverUrl;
    }
  }
};
</script>

第二种：使用Vue.prototype挂载，直接使用this调用

第一步：在main.js中进行挂载

Vue.prototype.Global_serverUrl_prototype='www.global.com';

第二步：在vue页面使用，注意：页面中不要在出现重复的属性或方法名。

<template>
  <div>
    <h1>{{global_serverUrl}}</h1>
    <button @click="getGlobal()">获取全局变量</button>
  </div>
</template>
<script>
import common from '../common/common.js';
export default {
  data() {
    //这里存放数据
    return {
        global_serverUrl:""
    };
  },
  //方法集合
  methods: {
    getGlobal(){
      this.global_serverUrl = this.Global_serverUrl_prototype;
    }
  }
};

第三种：使用vuex的store仓库

参考我的Vuex-Store仓库入门中第一个入门实例即可