时间戳

首页 > 解决方案 > 如何从nuxt js中asyncData中的组件调用插件方法

vuejs2 - 如何从nuxt js中asyncData中的组件调用插件方法

问题描述

组件：pages/user/_username.vue

export default {
  async asyncData({ context, route, $twitter }) {
    const userProfile = await $twitter
      .getUserProfile(route.params.username)
      .then((userProfile) => userProfile.data)
    return { userProfile }
  },
}

插件/twitter.server.js

async getUserProfile(username) {
    const userProfiles = await axios
      .get(
        `https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=${username}&count=100&tweet_mode=extended`,
        {
          headers: {
            Authorization: 'Bearer ' + (await this.fetchAccessToken()),
          },
        }
      )
      .then((res) => {
        return res
      })
      .catch((error) => {
        if (error.response.status === 401) {
          this.cache.set('accessToken', this.fetchAccessToken())
          return this.getSampleStatuses()
        }
      })
    return userProfiles
  }

此代码仅适用于服务器端渲染。我想调用客户端或服务器端渲染。如何在客户端调用

标签： vuejs2nuxt.js

解决方案

您可以通过根 Vue 应用程序实例访问 $twitter（假设您已将其设置为插件）。您可以通过上下文访问根 Vue 应用程序实例，该上下文已包含在 asyncData 调用中。

只是改变：

const userProfile = await $twitter

至：

const userProfile = await context.app.$twitter

推荐阅读