Vue js计算属性评估顺序答案

【问题标题】：Vue js computed properties evaluation orderVue js计算属性评估顺序
【发布时间】：2018-02-12 11:02:41
【问题描述】：

我有一个使用“data1”道具的组件。

<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 仍然未定义）

这种情况应该如何处理？

【问题讨论】：

也许为prop设置一个默认值：props: { data: { default: null /* or default values*/ } }
只有在需要时才应评估计算属性。您可以在另一个属性中使用计算属性，它应该可以正常工作。数据肯定在$store 中吗？仔细检查的一种方法是在您的 data1 方法中直接使用 this.$store.state.componentData.value1。
您得到的确切错误是什么？在计算属性之前未初始化存储似乎极不可能。
@RossWilson 谢谢，你是对的。这是一个简化的示例，但我对商店中对象的确切路径有疑问。

标签： vue.js vuejs2 vue-component vuex

【解决方案1】：

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

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

【讨论】：