uniapp vue2 全局变量

在uni-app中，可以使用globalData来定义全局变量。在App.vue文件中，可以声明和使用globalData，并且可以使用API来读写这个值。下面是一个示例：

// App.vue
export default {
  globalData: {
    userInfo: null,
    token: ''
  },
  onLaunch() {
    // 在这里可以对globalData进行初始化
    this.globalData.userInfo = { name: 'John', age: 20 };
    this.globalData.token = '123456';
  }
}

在其他组件中，可以通过`this.$options.globalData`来访问和修改globalData的值。例如：

// MyComponent.vue
export default {
  mounted() {
    console.log(this.$options.globalData.userInfo); // 输出：{ name: 'John', age: 20 }
    this.$options.globalData.token = '654321';
  }
}

需要注意的是，uni-app中的globalData是在各个平台（包括H5、App等）都实现了的。这样可以方便地在不同平台上共享和使用全局变量。

相关问题

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>

uniapp vue3全局变量

在Uniapp中设置全局变量的方法如下[^1]：

1. 在App.vue中定义全局变量：

export default {
  globalData: {
    db_picture: 'https://testimg.xxxxx.com/',
    uploadUrl: 'https://test.xxxxx.com',
    userName: '白居易'
  },
  onLaunch() {
    console.log(this.$scope.globalData.userName);
  }
}

在App.vue中的`globalData`对象中定义了全局变量`userName`，可以在整个应用中访问。

2. 在其他页面中使用全局变量：

<template>
  <view>
    <!-- 注意，不能在模板中直接使用 getApp().globalData.userName -->
    <<琵琶行>>的作者是：{{author}}
  </view>
</template>

<script>
export default {
  data() {
    return {
      author: ''
    }
  },
  onShow() {
    // 每次A.vue出现在屏幕上时，都会触发onShow，从而更新author值
    this.author = getApp().globalData.userName;
  }
}
</script>

通过在其他页面的`onShow`生命周期函数中，使用`getApp().globalData.userName`来获取全局变量的值，并将其赋给页面中的数据属性`author`，从而在模板中显示全局变量的值。