Vuejs：从组件观察状态变量

Question

我有一个全局变量，在安装组件时使用 API 调用填充。 我还有一个图表组件，如果该变量不为空（即请求是否已完成并且已填充），我想显示它。

目前我正在使用这个来渲染图表：

<template>
  <div class="container">

    <b-chart
        v-if="$store.state.lists[api_key] != null"
        :chartdata="$store.state.lists[api_key]"
        :options="options"
    />
  </div>
</template>

我已尝试将此检查 $store.state.lists[api_key] != null 移动到 computed 或 watch，以最大限度地减少内联脚本，但我似乎无法让它工作。有人能告诉我怎么做吗？

Answer 1

由于null 值被解释为“虚假”，并且假设您有一个“api_key”数据变量，您可以这样使用它：

computed: {
    chartData() {
        return this.$store.state.lists[this.api_key]
    }
}

<template>
  <div class="container">
    <b-chart
        v-if="chartData"
        :chartdata="chartData"
        :options="options"
    />
  </div>
</template>

Answer 2

试试这个：

computed: {
    canShowChart() {
        return this.$store.state.lists[this.api_key] != null;
    }
}

<b-chart
    v-if="canShowChart"
    :chartdata="$store.state.lists[api_key]"
    :options="options"
    />