Блог

Если я запускаю этот код в компоненте страницы ( mountains.vue ), он работает, и я получаю данные из API с помощью Axios:

 <template>
  <div>
    <ul>
      <li v-for="(mountain, index) in mountains" :key="index">
        {{ mountain.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mountains: [],
    };
  },
  async asyncData({ $axios }) {
    const mountains = await $axios.$get("https://api.nuxtjs.dev/mountains");
    return { mountains };
  },
};
</script>
  

Но я хочу поместить этот код в компонент ( MountainsList ) и выполнить вызов Axios в компоненте ( MountainsList ), но отобразить данные в компоненте страницы ( mountains.vue ), введя компонент в Nuxt следующим образом:

 <template>
  <MountainsList />
</template>
  

Теперь, когда я запускаю код, данные, использующие Axios, больше не отображаются… Итак, как мне ввести данные в компонент страницы выше, выполнив вызов Axios в дочернем компоненте?

asyncData работает только на странице

Из документов

asyncData вызывается каждый раз перед загрузкой компонента страницы

Один из способов выполнить то, что вы хотите, — передать горы в качестве поддержки MountainList компоненту. Что-то вроде приведенного ниже…

 <template>
  <MountainList :mountains="mountains" />
</template>

<script>
export default {
  async asyncData({ $axios }) {
    const mountains = await $axios.$get("https://api.nuxtjs.dev/mountains");
    return { mountains };
  },
};
</script>
  

И компонент с кодом и prop mountains…

 <template>
  <div>
    <ul>
      <li v-for="(mountain, index) of mountains" :key="index">
        {{ mountain.title }}
      </li>
    </ul>
  </div>
</template>
    
<script>
export default {
  props: ['mountains'],
};
</script>
  

Если вы действительно хотите вызвать API в дочернем компоненте, вы можете использовать метод выборки.

Также вы не должны определять data() свойство на странице. Я считаю, что он перезапишет данные, отображаемые сервером.

Согласно официальным документам :

Компоненты в этом каталоге не будут иметь доступа asyncData .

Это означает, что любые компоненты внутри components папки не могут получить доступ к этому методу.