uni-app globaldata 自定义函数中无法获取this

在uni-app中，globalData 通常用于存储全局数据，可以在各个页面间共享。在自定义函数中无法直接获取 this 的问题通常是因为 this 的上下文在函数中被改变了。为了确保 this 能正确指向 uni-app 的全局实例，你可以使用箭头函数或者将 this 绑定到函数上。

以下是一些代码示例，展示了如何在自定义函数中安全地访问 globalData。

示例 1：使用箭头函数

箭头函数不会创建自己的 this 上下文，因此 this 会保持为定义箭头函数时的上下文。

// 在App.vue中定义globalData
App({
  globalData: {
    userInfo: null
  },
  onLaunch() {
    // 示例：在启动时设置globalData
    this.globalData.userInfo = { name: 'John Doe' };
  },
  methods: {
    // 使用箭头函数确保this指向正确
    getUserInfo: () => {
      // 注意：箭头函数在这里不适用，因为箭头函数在定义时(这里是对象字面量中)没有绑定this上下文
      // 这是一个错误示例，仅用于说明问题。
      // 正确做法是使用普通函数或在外部已经绑定了this的上下文中调用箭头函数
      console.log(this.globalData.userInfo); // 这将抛出错误，因为this不是App实例
    },
    correctGetUserInfo: function() {
      // 正确做法：使用普通函数，这里的this将指向App实例
      console.log(this.globalData.userInfo);
    }.bind(this) // 或者在这里绑定this
  }
});

// 在页面中调用
// 注意：直接在App实例的方法中调用，确保this正确
const app = getApp();
console.log(app.globalData.userInfo);

示例 2：在外部绑定 this

如果你需要在事件处理函数或其他回调中使用 this，可以在外部将 this 绑定到函数上。

App({
  globalData: {
    userInfo: null
  },
  methods: {
    getUserInfoBound: function() {
      console.log(this.globalData.userInfo);
    }.bind(this) // 在定义时绑定this
  }
});

// 在某个页面或组件中
const app = getApp();
setTimeout(app.methods.getUserInfoBound, 1000); // 即使在setTimeout中，this也正确指向App实例

注意

• 箭头函数在对象字面量中（如方法定义）不能直接用于绑定 this，因为它们在定义时没有上下文。
• 使用 .bind(this) 可以在函数定义时绑定 this 上下文。
• 确保在调用全局方法时，通过 getApp() 获取 App 实例，以正确访问 globalData。

通过上述方法，你可以在自定义函数中安全地访问和操作 globalData。