您将如何使用组合 API 编写此代码？

【问题标题】：How would you write this using the composition api?您将如何使用组合 API 编写此代码？
【发布时间】：2021-09-04 16:34:44
【问题描述】：

  computed: {
    userName() {
      // (4) Display authenticated user name
      const user = this.$gapi.getUserData()

      return user.accessToken
    },
  },

这是我试图转换为 Vue3 组合 API 的代码。基本上我知道我需要导入计算等等，但我似乎无法解决的部分是如何在设置函数中编写this.$gapi.getUserData()。

gapi 是我使用的导入包..

【问题讨论】：

标签： vue.js vuejs2 vue-component vuejs3 vue-composition-api

【解决方案1】：

全局属性在 Vue 3 中的 app.config.globalProperties 上设置，应用程序实例可以通过 getCurrentInstance().appContext 检索。

等效的 Composition API 与此类似：

import { getCurrentInstance, computed } from 'vue'

export default {
  setup() {
    return {
      userName: computed(() => {
        const user = getCurrentInstance().appContext.config.globalProperties.$gapi.getUserData()
        return user.accessToken
      })
    }
  }
}

【讨论】：