Javascript 尝试在Vue+；中嵌入Vega图表时出现未捕获错误；Vuex项目

我正在尝试在Vue.js（与vuex一起用于状态管理）项目中使用。基本上，后端提供一个vegajson对象，前端通过带有click事件的httpget请求获取该对象。但是，我必须单击两次才能显示绘图，第一次单击事件始终会触发错误“

Uncaught（in promise）TypeError:无法读取null的属性“$schema”。有人能帮我调试吗？非常感谢。详情如下：

vue组件文件：

<template>
  <button @click.native="fetchCars(); displayVegaPlot()">fetch cars</button>
  <div id="vega-example"></div>
</template>

<script>
  import {default as vegaEmbed} from 'vega-embed'
  import {
  mapState
} from 'vuex'

  export default {
    name: 'VegaExample',
    props: {
      component_msg: String
    },
    methods: {
      fetchCars () {
        this.$store.dispatch('fetchCars')
      },
      displayVegaPlot () {
        vegaEmbed('#vega-example', this.vega_cars, {actions: false})
      }
    },
    computed: {
    ...mapState([
      'vega_cars'
    ])
    }
  }
</script>

非常感谢@TommyF的评论，在阅读了一些文档之后，我想我找到了解决方案（显然是作为web应用开发的新手，
Vue
我不知道
Vue
提供了一种特殊的
观看功能）。因此，在组件Vue文件中，只要
Vega\u cars
更改值，就可以设置
watch
来显示Vega绘图，而不是声明一个方法
displayVegaPlot
来强制调用：

    watch: {
    vega_cars: (spec) => {
      console.log('$store.state.vega_cars changed value')
      if (spec) {
        vegaEmbed('#vega-example', spec, {actions: false})
      }
    }
  }

当然，
…mapState（['vega\u cars']）
需要被放入
computed
在
vegaEmbed
中使用之前，您既不等待同步获取，也不检查
vega\u cars
中的值。在调用
displayVegaPlot
之前，请等待
您的取回，或者不要直接调用它，如果vega_车！=null
@TommyF当您使用
await
引用时，您是否在谈论这样的内容：
async fetchCars（）{let promise=new promise（（resolve，reject）=>{this.$store.dispatch（'fetchCars'）；resolve（）；}）wait promise；vegaEmbed（'vega example'，this.vega_cars，{actions:false}
我尝试了，但仍然得到了相同的行为…这是因为您的存储操作是异步的，并且会立即返回，而不是在它收到服务器响应后返回（不过应该是这样的）。我不熟悉vega，因此很难说增加反应性的最佳解决方案是什么，但我会观察vega_车，当它
！=null时，执行displayVegaPlot方法，或者根据您需要vega_车的其他位置，在该组件中同步本地获取它可能更合适.
    watch: {
    vega_cars: (spec) => {
      console.log('$store.state.vega_cars changed value')
      if (spec) {
        vegaEmbed('#vega-example', spec, {actions: false})
      }
    }
  }