невозможно получить измененные данные из геттера - PullRequest
Новая
       3

невозможно получить измененные данные из геттера

0 голосов
/ 10 апреля 2020

Я пытаюсь визуализировать график d3, используя сохраненные данные в vuex. но я не получаю данные в функции renderGraph ().

как получить данные в renderGraph ()?

Ниже приведены методы хранения.

store / index. js

import Vue from "vue";
import Vuex from "vuex";
import * as d3 from "d3";

Vue.use(Vuex);
export const store = new Vuex.Store({
  state: {
    subscribers: []
  },
  getters: {
    getterSubscribers: state => {
      return state.subscribers;
    }
  },
  mutations: {
    mutationSubscribersData: (state, payload) => {
      state.subscribers = payload;
    }
  },
  actions: {
    actionSubscribersData: async ({ commit }) => {
      let subsData = await d3.json("./data/subscribers.json"); // some json fetching
      commit("mutationSubscribersData", subsData);
    }
  }
});

Ниже находится родительский компонент

Home. vue

<template>
  <div>
    <MyGraph /> // child component rendering
  </div>
</template>
<script>

import MyGraph from "./MyGraph.vue";

export default {
  components: {
    MyGraph
  },
};
</script>

Ниже - дочерний компонент.

MyGraph. vue

<template>
  <div>
    <svg width="500" height="400" />
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";

export default {
  computed: {
    ...mapGetters(["getterSubscribers"])
  },
  methods: {
    ...mapActions(["actionSubscribersData"]),
    renderGraph(data) {
      console.log(data); // DATA NOT COMING HERE

      // MyGraph TO BE RENDERED WITH THIS DATA 
    }
  },
  mounted() {
    this.actionSubscribersData();
    this.renderGraph(this.getterSubscribers);
  }
};
</script>

Я пробовал монтировать, создавал хуки жизненного цикла. но не нашел поступающих данных.

Ответы [ 2 ]

0 голосов
/ 10 апреля 2020

Должна быть задержка для действия actionSubscribersData для установки значения для сохранения. Лучше совершай действие async или смотри getter. Наблюдать за значением getter можно следующим образом 

watch:{
  getterSubscribers:{ // watch the data to set
    deep:true,
    handler:function(value){
      if(value){ // once the data is set trigger the function
        this.renderGraph(value);
      }
    }
  }
}
0 голосов
/ 10 апреля 2020

Состояние гонки. actionSubscribersData равно async и возвращает обещание. Следует дождаться, пока данные станут доступными: 

  async mounted() {
    await this.actionSubscribersData();
    this.renderGraph(this.getterSubscribers);
  }
...