Ошибка при попытке встроить диаграмму Vega в проект Vue + Vuex - PullRequest
Новая
       12

Ошибка при попытке встроить диаграмму Vega в проект Vue + Vuex

0 голосов
/ 16 ноября 2018

Я пытаюсь использовать vega-embed в проекте Vue.js (вместе с vuex для управления состоянием). По сути, бэкэнд обслуживает json-объект Vega, который получает интерфейс через HTTP-запрос GET с событием click. Однако мне нужно дважды щелкнуть, чтобы отобразить график, и событие первого щелчка всегда вызывает ошибку «Uncaught (in promise) TypeError: Cannot read property '$schema' of null». Может кто-нибудь помочь мне отладить? Очень ценится. Подробности показаны ниже:

Файл компонента 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>

... и файл js магазина: 

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)

export default new Vuex.Store({
  strict: true,
  state: {
    error: '',
    vega_cars: null
  },

  mutations: {
    SET_CARS: (state, cars) => {
      state.vega_cars = cars
    },
    SET_ERROR: (state, error) => {
      state.error = error
    }
   }

  actions: {
    fetchCars: (context) => {
      axios.get(`vega_cars`)
        .then(response => context.commit('SET_CARS', response.data))
        .catch(error => context.commit('SET_ERROR', error))
    }
  }

1 Ответ

0 голосов
/ 17 ноября 2018

Большое спасибо за комментарий от @TommyF, после некоторого прочтения документа, я думаю, что я нашел решение (очевидно, как новичок в разработке веб-приложений, и Vue я не знал, Vue предлагает специальное watch объект). Таким образом, в файле компонента Vue вместо объявления метода displayVegaPlot для обязательного вызова можно настроить watch для отображения графика Vega, как только vega_cars изменит значение: 

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

и, конечно, ...mapState(['vega_cars']) необходимо ввести в computed.

...