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

Question

我启动项目如下

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响应数据的数据？

Answer 1

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

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

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

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

I want to load and populate the data for each component in vue.js (nuxt.js)

javascript

components

vue.js

vuejs2

nuxt.js