Каков приемлемый подход, позволяющий вычисленному значению ожидать асинхронных данных в Vue.js?

Question

Предположим, что я получаю список продуктов из моего диспетчера состояний внутри моего компонента Vue.js, а вычисленное свойство нуждается в этом списке для его обработки. Наконец, мой DOM зависит от перечня.

<template> 
    <span>{{ computedproducts }}</span> 
</template> 

<script> 
export default { 

    created() { 
    this.$store.dispatch('getProducts') 
    }, 

    computed: { 
    products() { 
     // Following is asynchronous 
     return this.$store.state.products 
    }, 

    computedProducts() { 
     // Processing products in some way 
     return this.products 
    } 

    } 
} 
</script> 

С этим я получаю сообщение об ошибке, потому что computedProducts не существует при запуске.

Возможным решением было бы установить:

<span v-if="products.length > 0">{{ computedproducts }}</span> 

А также вернуть обещание от состояния продукции и обрабатывать продукты на created крючок. Но он чувствует себя взломанным. Есть ли лучший подход?

Answer 1

Я хотел бы сделать что-то вроде этого:

export default { 
    data() { 
    return { products: [] } 
    }, 

    created() { 
    this.$store.dispatch('getProducts').then(res => { this.products = res }) 
    }, 

    computed: { 
    computedProducts() { 
     // Processing products in some way 
     return this.products 
    } 
    } 
} 

Live Demo.