vue.js - 无法从 getter 检索变异数据

Question

我正在尝试使用 vuex 中存储的数据来渲染 d3 图。但我没有在 renderGraph() 函数中获取数据。

如何在 renderGraph() 中获取数据？

以下是存储方法。

存储/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);
    }
  }
});

下面是父组件

主页.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>

我已经尝试过安装、创建的生命周期钩子。但没有发现数据来了。

标签： vue.jsd3.jsvuex

Answer 1

有比赛条件。actionSubscribersData是async并返回一个承诺。应该等待直到数据可用：

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