setup 在 onMounted 加载数据之前返回 courseDetail答案

【问题标题】：setup returns courseDetail before onMounted loads datasetup 在 onMounted 加载数据之前返回 courseDetail
【发布时间】：2021-11-07 09:44:27
【问题描述】：

我正在使用 vuejs 编写一个应用程序，我想在安装组件时加载数据，但 setup 在 onMounted 加载数据之前返回数据

我的代码我通过 props 从另一个组件获取了 id。然后通过一个包含 axios 方法的函数传递它。

返回一个数据数组。

export default defineComponent({
   props: {
      courseId: {
        type: String
      }
    },
    data(){
      return {
        courseDetails: []
      }
    },

    setup(props) {
     let courseDetail = reactive([])
     let sections = reactive([])

    console.log("No details", courseDetail)
     onMounted(() => {
        // showLoader(true);

      Course.getSectionAndSubsections("get-section-and-subsections", props.courseId).then(response => {
            courseDetail = response.data.courses;
            sections = response.data.sections;
            console.log("leave my house", courseDetail)
            NotificationService.success(response.data.message);
            // showLoader(false);
        }).catch(err => {
            NotificationService.error(err.response);
            // showLoader(false);
        });
     });
     console.log("Course detail ", courseDetail);
     return{
       courseDetail
     }
    }
})

我该如何解决这个问题？

【问题讨论】：

标签： vue.js

【解决方案1】：

我想在安装组件但安装程序返回数据时加载数据在 onMounted 加载数据之前

这是正确的 - 在 onMounted 钩子之前它应该返回默认值。问题是您的数据不是被动的。你正在使用这样的反应：

let courseDetail = reactive([])
courseDetail = response.data.courses;

这是不正确的，因为您没有更改 couseDetail 内容。您分配了一个新对象。

在这种情况下 ref 可能会好一点：

const courseDetail = ref([])

然后你就可以获得价值：

console.log(courseDetail.value)

并分配一个新的：

courseDetail.value = SOMETHING

你所做的是：

let courseDetail = reactive([])
courseDetail = response.data.courses;

它可以工作，但它应该看起来像这样：

let state = reactive({
  courseDetail: []
})
state.courseDetail = response.data.courses;

使用两个选项检查我的演示：基于 ref 和基于响应式：

https://codesandbox.io/s/ref-vs-reactive-jfdvc?file=/src/App.vue

【讨论】：