您将如何使用组合 API 编写此代码? [英] How would you write this using the composition api?

问题描述

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

      return user.accessToken
    },
  },

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

This is the code im trying to convert to the Vue3 composition API. Essentially i understand i need to import computed and so on but the part i can't seem to work out is how to write this.$gapi.getUserData() in the setup function.

gapi 是我使用的导入包..

gapi is an imported package im using..

推荐答案

全局属性设置在 app.config.globalProperties 在 Vue 3 中，应用实例可以通过 getCurrentInstance().appContext.

Global properties are setup on app.config.globalProperties in Vue 3, and the application instance can be retrieved via getCurrentInstance().appContext.

等效的 Composition API 类似于:

The equivalent Composition API would be similar to this:

import { getCurrentInstance, computed } from 'vue'

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

这篇关于您将如何使用组合 API 编写此代码?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！