Vue Js 中的计算值 - 异步调用中的用法

Question

我正在我的 .vue 文件的 computed: 部分中创建一个动态数组。这个数组有一组我每个都想调用的 url（在一个重复的组件中），以获取文章。这些文章各不相同，因此在页面渲染时生成计算数组，完成后我想在组件生成时调用 url。

computed: {
    calcTheArray() {
        // make the actual array
        // basically, I grab a (computed! so can't use that in async either) 
        // array with months that have passed before today
        // I create an array with combined urls, that incorporate those month names
        // no other dependencies exist
        return array;
    }
}, 

然后：

async asyncData({ error, app, }) {
    try {
        // lots of things happen here, another api call, some parsing etc.

        const promises = [];
        this.calcTheArray.forEach((value) => {
            promises.push(app.$axios.$get(`${value}`, { useCache: true }));
        });
    } catch (e) {
        console.log(e);
        return error({ statusCode: 500, message: e.message });
    }
},

我得到的错误是：Cannot read property 'calcTheArray' of undefined

我有点理解为什么，也就是说，因为异步函数是......很好异步，所以我的数据还不存在？我想？但是，我将如何将动态创建的 url 放入我的 axios 调用中呢？

到目前为止，我已经尝试过查看this.calcTheArray 是否是罪魁祸首，并尝试使用不同的方式来使用计算出的数组（例如vm.calcTheArray，仅calcTheArray）我还尝试定义我的data() { 部分中的数组

data() {
    return {
      calcTheArray: [],
    };
  },

但是我（显然）最终得到了Duplicated key 'calcTheArray'。

我很茫然。谁能给我指点一下？

Answer 1

如果我理解正确，您只想在 calcTheArray 实际计算出一些值并防止未定义错误时才执行异步方法。在这种情况下，您可以使用 watcher 来触发异步功能，您可以尝试以下操作：

computed: {
    calcTheArray() {
        // your code to create the array;
        return array;
    }
},
watch: {
    calcTheArray() {
        // executed when there's any mutation detected by vue on calcTheArray;
        this.asyncData(object)
    }
},
methods: {
    async asyncData({ error, app, }) {
      try {
         // lots of things happen here, another api call, some parsing etc.

         const promises = [];
         this.calcTheArray.forEach((value) => {
            promises.push(app.$axios.$get(`${value}`, { useCache: true }));
         });
       } catch (e) {
         console.log(e);
         return error({ statusCode: 500, message: e.message });
       }
   }
}

这样，vue 将在启动异步方法之前等待计算数组。希望它适合你。