在Nuxt js的异步方法中，类型'Vue'上不存在属性'info'

Question

我正在尝试将来自api的响应存储在我的Nuxt js应用程序的async方法中的变量info中。我收到此错误：Property 'info' does not exist on type 'Vue'。如果我将相同的Axios调用放入安装中，则没有错误。这就是我所拥有的：

<template>
  <div>
      {{ info }}
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import axios from 'axios';

@Component({
  async asyncData(): Promise<any> {
    await axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => (this.info = response));  <--- The error is here
  },
})

export default class MainClass extends Vue {

  info: any = null;

  ....
}

</script>

感谢您的帮助，谢谢！

Answer 1

这里的问题是asyncData在服务器端被调用，无法访问该组件。

警告：您无权通过此权限访问组件实例在asyncData内部，因为它在启动组件之前被调用。

但是您可以做的是可以通过上下文访问商店。

async asyncData({ store })

解决方法是将数据存储到Vuex存储中，并从存储中获取数据，如：

computed: {
   info(){
      return this.$store.state.info;
   }
}

上下文：https://nuxtjs.org/api/context

asyncData：https://nuxtjs.org/api

编辑：

转到文件夹store，应该有一个名为index.js的文件。如果没有，则创建一个。现在您应该具有此结构store/index.js。

创建状态：

export const state = () => ({
  info: null
})



export const mutations = {
  setInfo(state, payload) {
    state.info = payload;
  }
}

您的asyncData应该看起来像这样：

async asyncData({ store }): Promise<any> {
   let { data } = await axios.get('https://api.coindesk.com/v1/bpi/currentprice.json');
   store.commit("setInfo", data);
  },

请注意：我从未使用过TS，所以..在ts上看起来可能有所不同。