Vue.js 我从官方网站的示例中运行了Fetch钩子

我从官方站点运行示例中的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) 

fetch（）中的

fetch.client.js:109错误：TypeError:无法读取未定义的属性“$get”
在_callee$（index.js？！./node_modules/vue loader/lib/index.js？！./pages/Video.vue？vue&type=script&lang=js&:74）
在tryCatch（runtime.js:63）
在Generator.invoke[as_invoke]（runtime.js:293）
在Generator.eval[as next]（runtime.js:118）
在asyncGeneratorStep（asyncToGenerator.js:5）
at_next（asyncToGenerator.js:27）
评估时（asyncToGenerator.js:34）
在新的承诺（）
评估时（asyncToGenerator.js:23）
在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>

导出默认值{
布局：“视频布局”，
名称：“视频”，
异步获取（）{
this.posts=等待此消息。$http。$get（'https://jsonplaceholder.typicode.com/posts')
.then（posts=>posts.slice（0,20））
console.log（this.posts）
},
fetchOnServer:false，
数据：（）=>({
员额：[]，
视频：[
{
颜色：“红色2”，
图标：“mdi之星”，
id:1，
标题：2020年10月22日，
videoId:'GpgmeaSQ2bc'，
},
{
颜色：“紫色变深-1”，
图标：“mdi书本变体”，
id:2，
标题：2020年10月22日，
videoId:'25yGGiYARbc'，
},
{
颜色：“绿色加亮-1”，
图标：“mdi Airballon”，
id:3，
标题：2020年10月22日，
videoId:'mZbHFWWd6fg'，
},
{
颜色：“靛蓝”，
图标：“mdi缓冲区”，
id:4，
标题：2020年10月22日，
videoId:'mZbHFWWd6fg'，
},
],
}),
方法：{
刷新（）{
这是。$fetch（）
},
就绪（事件）{
this.player=event.target
},
方法（url）{
this.videoId=this.$youtube.getIdFromURL（url）
this.startTime=this.$youtube.getTimeFromURL（url）
}
}
}

我认为您可能需要先安装

http

模块，如下所示：

npm安装@nuxt/http

然后将以下内容添加到

numxt.config.js

：

导出默认值{
模块：[
“@numxt/http”，
],
http:{
//配置任何选项，如
//基本URL:“https://jsonplaceholder.typicode.com"
}
}

然后，您可以按照代码中的方式进行调用：

async fetch（）{
this.posts=等待这个。$http.$get（'/posts'）。然后（posts=>posts.slice（0,20））
}

是的，没错。提前一点解决了问题，但感谢您快速、详细和正确的回答。