Vue js计算属性评估顺序

我有一个使用'data1'道具的组件。Vue js计算属性评估顺序

<template> 
    <div> 
     <component1 :data='data1'><component1> 
    </div> 
<template>

这DATA1是需要另一个运算数据为计算其值中的一个所计算的属性：

computed: { 

    componentInfo: function() { 
     return this.$store.state.componentData; 
    } 

    data1: function() { 
     return {value1: this.componentInfo.value1, ... other values} 
    } 
}

我的问题是，组件试图从商店得到componentInfo之前评估DATA1值（由于this.componentInfo仍未定义，导致错误）

应如何处理这种情况？

来源

2017-09-04 Reg

也许设立支柱的默认值：'道具：{数据：{默认：null/*或默认值* /}}' –

计算性能应仅在需要时才进行评估。您可以在另一个内部使用计算属性，它应该可以正常工作。是'$ store'中的数据吗？一种双重检查的方法是直接在'data1'方法中使用'this。$ store.state.componentData.value1'。 –

你正在得到什么确切的错误？在计算属性之前，商店未被初始化似乎不太可能。 –

这很容易处理。只需添加一个额外的if来计算性能：

data1() { 
    if (this.componentInfo) { // check if it exists 
    return { value1: this.componentInfo.value1, ... other values } 
    } else { 
    return {} // some default value 
    } 
}

来源

2017-09-04 11:02:49

Vue js计算属性评估顺序

回答

相关问题