Question

我从官方站点的示例运行Fetch挂钩。 “ nuxt”：“ ^ 2.14.7” 给出错误消息

fetch.client.js:109 Error in fetch(): TypeError: Cannot read property '$get' of undefined
    at _callee$ (index.js?!./node_modules/vue-loader/lib/index.js?!./pages/Video.vue?vue&type=script&lang=js&:74)
    at tryCatch (runtime.js:63)
    at Generator.invoke [as _invoke] (runtime.js:293)
    at Generator.eval [as next] (runtime.js:118)
    at asyncGeneratorStep (asyncToGenerator.js:5)
    at _next (asyncToGenerator.js:27)
    at eval (asyncToGenerator.js:34)
    at new Promise (<anonymous>)
    at eval (asyncToGenerator.js:23)
    at VueComponent.fetch (index.js?!./node_modules/vue-loader/lib/index.js?!./pages/Video.vue?vue&type=script&lang=js&:88)

我的代码

<script>
    export default {
      layout: 'videoLayout',
      name: "Video",
      async fetch () {
        this.posts = await this.$http.$get('https://jsonplaceholder.typicode.com/posts')
          .then(posts => posts.slice(0, 20))
        console.log(this.posts)
      },
      fetchOnServer: false,
      data: () => ({
        posts: [],
        videos: [
          {
            color: 'red lighten-2',
            icon: 'mdi-star',
            id: 1,
            title: '22.10.2020 Блага Вість Черкаси',
            videoId: 'GpgmeaSQ2bc',
          },
          {
            color: 'purple darken-1',
            icon: 'mdi-book-variant',
            id: 2,
            title: '22.10.2020 Блага Вість Черкаси',
            videoId: '25yGGiYARbc',
          },
          {
            color: 'green lighten-1',
            icon: 'mdi-airballoon',
            id: 3,
            title: '22.10.2020 Блага Вість Черкаси',
            videoId: 'mZbHFWWd6fg',
          },
          {
            color: 'indigo',
            icon: 'mdi-buffer',
            id: 4,
            title: '22.10.2020 Блага Вість Черкаси',
            videoId: 'mZbHFWWd6fg',
          },
        ],
      }),
      methods: {
        refresh() {
          this.$fetch()
        },
        ready (event) {
          this.player = event.target
        },
        method (url) {
          this.videoId = this.$youtube.getIdFromURL(url)
          this.startTime = this.$youtube.getTimeFromURL(url)
        }
      }
    }
</script>

Answer 1

我认为您可能需要先安装http模块，如下所示：

npm install @nuxt/http

然后将以下内容添加到nuxt.config.js：

export default {
  modules: [
    '@nuxt/http',
  ],

  http: {
    // configure any options like
    // baseURL: "https://jsonplaceholder.typicode.com"
  }
}

然后，您可以像在代码中一样进行呼叫：

async fetch () {
        this.posts = await this.$http.$get('/posts').then(posts => posts.slice(0, 20))
      }

我从官方网站上的示例运行Fetch挂钩

1 个答案: