Vue 计算属性返回一个承诺？

Question

我有一个触发 API 调用并返回数据的计算属性：

async ingredients() {
    const url = "/api/ingredients";

    const request = new Request(url, {
      method: "GET",
      credentials: "same-origin"
    });

    const response = await fetch(request);
    const json = await response.json();
    //debugger;
    return json;
}

我在其中的调试器会在页面加载时捕获并包含我希望看到的所有数据（变量 json 是一个包含我的项目的数组）。

但是当我查看 Vue Dev 工具中的 Vue 组件时，它只是说：

ingredients:Promise

我一直在工作中使用相同的结构，但我不知道这有什么不同。如果我在浏览器中点击 API 路由，我会看到预期的 JSON。

我正在像这样迭代它：

<tr v-for="(ingredient, index) in ingredients" :key="index">

但由于这里的ingredients 只是指一个 Promise，所以表格没有呈现。

我不确定这是否重要，但我使用的是 Vue/Laravel 组合。 Laravel 端工作正常，API 调用返回到我期望的 URL。

Answer 1

这里的原因是计算属性在 Promise 完成后实际上不会更新，因为它们对 setter 和 getter 进行操作 - 所以在这里使用 vuex dispatch 或任何其他 Promise 都不起作用。

如果您在 created() 生命周期中触发您的函数，那么应该这样做。此外，如果您需要能够动态更改配方，您可以设置一个观察者来捕捉任何更新。

data: () => ({
    ingredients: null,
})

watch: {
    ingredients(nexVal, preVal) {
        // do some stuff here
    }
}

created() {
    this.ingredients = myAsyncCallForIngredients()
}