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

Posted 2023-02-22

【中文标题】您将如何使用组合 API 编写此代码？

【英文标题】：How would you write this using the composition 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 是我使用的导入包..

【参考方案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
      )