uniApp全局变量怎么定义,怎么获取？

八股文_UniApp面试题 0 98

参考回答：

在 UniApp 中，全局变量可以通过以下方式定义和获取：

通过 Vue.prototype 定义全局变量：
- 使用 Vue.prototype 可以将全局变量挂载到 Vue 实例中，这样在所有页面和组件中都能访问到。
定义全局变量：
在 main.js 中定义全局变量：
```
Vue.prototype.$globalVariable = '这是全局变量';
```
获取全局变量：
在任意页面或组件中，通过 this.$globalVariable 获取：
```
console.log(this.$globalVariable); // 输出 '这是全局变量'
```
通过 uni.setStorage 和 uni.getStorage 存储全局变量：
- uni.setStorage 可以将数据存储到本地，uni.getStorage 可以从本地读取数据，这对于持久化全局变量非常有用。
存储全局变量：
```
uni.setStorage({
 key: 'globalVar',
 data: '这是一个全局变量'
});
```
获取全局变量：
```
uni.getStorage({
 key: 'globalVar',
 success: function (res) {
   console.log(res.data); // 输出 '这是一个全局变量'
 }
});
```
通过 getApp() 获取全局变量：
- 在 App.vue 中定义全局变量，并通过 getApp() 在任何页面中访问。
在 App.vue 中定义全局变量：
```
// App.vue
export default {
 globalData: {
   userInfo: null
 }
}
```
在页面中获取全局变量：
```
const app = getApp();
console.log(app.globalData.userInfo); // 获取全局数据
```

详细讲解与拓展：

通过 Vue.prototype 定义全局变量：
- Vue.prototype 让你在 Vue 实例中挂载任何你需要的属性或方法，这些属性和方法可以在整个应用中访问。因此，通过 Vue.prototype 定义的变量在任何组件或页面中都能通过 this.$globalVariable 访问。
- 这种方式适合定义一些不需要持久化的全局变量，并且可以在运行时修改。
通过 uni.setStorage 和 uni.getStorage 存储全局变量：
- 使用 uni.setStorage 和 uni.getStorage 方式可以将数据存储到本地，并且能够在应用重新启动后获取存储的数据。这对于需要在多个页面间共享数据，或需要跨会话保存的全局变量非常有用。
- 注意，uni.setStorage 和 uni.getStorage 是异步操作，需要使用回调函数获取结果。
通过 getApp() 获取全局变量：
- getApp() 返回的是整个应用实例对象，通过访问 App.vue 中定义的 globalData，你可以存储并获取全局变量。这种方式适合存储用户信息、配置信息等，确保数据能够在应用的任何地方访问。
- globalData 中的变量通常在应用的生命周期内保持不变，适合用于存储全局状态或配置信息。

举个例子：

假设你正在开发一个电商应用，需要在多个页面中访问用户的登录信息。你可以使用 getApp() 方法来存储和获取登录状态。

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

// App.vue
export default {
  globalData: {
    isLoggedIn: false,
    userInfo: null
  }
}

在登录页面中更新全局变量：

// 登录页面
const app = getApp();
app.globalData.isLoggedIn = true;
app.globalData.userInfo = { name: 'John Doe', email: 'john@example.com' };

在其他页面中访问全局变量：

// 其他页面
const app = getApp();
console.log(app.globalData.isLoggedIn); // true
console.log(app.globalData.userInfo); // { name: 'John Doe', email: 'john@example.com' }

总结：在 UniApp 中，全局变量可以通过 Vue.prototype、uni.setStorage/uni.getStorage 或 getApp() 等方式进行定义和获取。选择合适的方法根据数据的需要是否持久化、是否跨页面共享等来决定。

参考回答：

详细讲解与拓展：

举个例子：

发表评论 取消回复

发表评论取消回复