我想为 vue.js (nuxt.js) 中的每个组件加载和填充数据答案

【问题标题】：I want to load and populate the data for each component in vue.js (nuxt.js)我想为 vue.js (nuxt.js) 中的每个组件加载和填充数据
【发布时间】：2017-11-28 07:56:44
【问题描述】：

我按如下方式启动项目。

vue init nuxt/express

我的目录是...

components
|- slider.vue
|- list.vue
pages
|- index.vue

组件是，

index.vue

<template>
  <my-slider/>
  <my-list/>
</template>
<script>
import MySlider from '~components/slider'
import MyList from '~components/list'
export default {
  components: {
    MySlider,
    MyList
  },
   asyncData () {
    ... axios get ...
    return {
        img: response.data.img
    }
  }
}
</script>

我设置了以下结构。

如果发生 GET / 请求，

我想在每个组件（MySlider、MyList）中从数据库中导入数据。

是否每个组件（MySlider、MyList）都需要从asyncData()发出axios请求？我应该从索引组件 asyncData() 发出 axios 请求吗？
请求后如何设置数据初始化axios响应数据？

【问题讨论】：

标签： javascript vue.js components vuejs2 nuxt.js

【解决方案1】：

您决定如何设置数据。如果您在两个子组件中使用相同的数据，我会从父组件中获取它们，并使用属性将其发送到 MySlider 和 MyList 组件。

如果两个组件中的数据彼此无关，我可能会尝试让这些组件尽可能松散耦合，并让它们在需要时获取数据。

查看 VueJS 的生命周期挂钩，了解如何挂钩组件上发生的任何生命周期事件；这些钩子允许您在需要时立即获取数据（阅读：一旦您的组件被创建/安装/任何您想要的）：https://vuejs.org/v2/api/#Options-Lifecycle-Hooks

【讨论】：