uniapp vue3 全局变量

在uni-app中实现全局变量有三种方式：

第一种方式是在需要的vue文件中import公共模块，并在data中定义全局变量。然后通过调用公共模块中的变量来获取全局变量的值。示例代码如下：

<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调用。在vue页面中使用全局变量时，通过this访问全局变量。示例代码如下：

<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;
    }
  }
};
</script>

第三种方式是使用vuex的store仓库来管理全局变量。在vuex的store中定义全局变量，并在需要的vue文件中通过this.$store访问全局变量。示例代码如下：

<template>
  <div>
    <h1>{{ global_serverUrl }}</h1>
    <button @click="getGlobal()">获取全局变量</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      global_serverUrl: ""
    };
  },
  methods: {
    getGlobal() {
      this.global_serverUrl = this.$store.state.global_serverUrl;
    }
  }
};
</script>