将 vuex 状态传递给图表 - vue

Question

我正在做一个图表组件，该组件将在页面上多次显示。

为此，我正在使用 Vuex，其中我有突变/动作来获得那个日期，并且一切正常。

在图形组件中，在 created() 中调用操作来发出请求，我想将日期传递给图表。

状态如下-

{
   typeChart: [data],
   typeChart2: [data2]
}

如果我从状态开始 console.log 它看起来很好，但如果使用键 returns undefined.

console.log(this.dataChart)
// log - { stacked: Array }

console.log(this.dataChart.stacked);
//  log - undefined

我发现将状态传递给图表的唯一方法是超时，但我认为这不是最好的方法。

这是我的代码

页面组件 -

<template>
    <stacked-chart
        endpoint="endpoint"
        chart="stacked"
        :states="['state1', 'state2', 'state3']"
        :keys="['key1', 'key2', 'key3']"
    />
</template>

图表的组成部分 -

<template>
    <div class="box-content-white">
        <div class="title"> Gráfico 1 </div> <!-- //! name for chart -->
        <column-chart  :data="data" :stacked="true" :colors="['#006837', '#FF0000', '#000']"></column-chart>
    </div>
</template>

<script>
    import { mapGetters } from 'vuex';
    import { mapActions } from 'vuex';

    export default {
        props: {
            endpoint: String,
            chart: String,
            states: Array,
            keys: Array
        },
        data() {
            return {
                 data: []
            }
        },
        created() {
            this.fetchReporting({endpoint: this.endpoint, chart: this.chart, states: this.states, keys: this.keys, formData: { state: 'negotiation' }});
            console.log(this.dataChart);
            console.log(this.dataChart[this.chart]);
            setTimeout(() =>{
                this.data = this.dataChart[this.chart];
            }, 150);
        },
        methods: {
            ...mapActions({
                fetchReporting: 'fetchReporting'
            })
        },
        mounted() {

            this.data = this.dataChart[this.chart];
        },
        computed: {
            ...mapGetters({
                dataChart: 'dataChart'
            })
        },
        watch: {

        }
    }
</script>

带 vuex 的文件 -

import axios from 'axios';

const state = {
    dataChart: {}
}

const mutations = {
    'ADD_DATA_CHART'(state, data) {
        state.dataChart[data.key] = [];

        [].forEach.call(data.states, (s, i) => {
            let obj = {};
            obj.name = s;
            obj.data = [];

            [].forEach.call(data.value, d => {
                obj.data.push([d.name, d[data.keys[i]].toFixed(2)]);
            });
            state.dataChart[data.key].push(obj);
        });
    }
}

const actions = {
    fetchReporting({state, commit}, response) {
        axios.post(response.endpoint, response.formData)
            .then(({data}) => {
                commit('ADD_DATA_CHART', {key: response.chart, value: data, states: response.states, keys: response.keys})
            }).catch(err => {
                console.log(err);
            });
    }
}

const getters = {
    dataChart: state => {
        return state.dataChart;
    }
}


export default {
    state,
    mutations,
    actions,
    getters
}

有什么建议吗？

Answer 1

您需要等待操作 fetchReporting 完成。通过使用 async/await or by using promise/resolve

将 vuex 状态传递给图表 - vue

Pass a state of vuex to a chart - vue

javascript

vue.js

vue-component

vuex

vuex-modules