Highmaps в VueJs .... передают состояние в mapOptions

Question

Я столкнулся с проблемой прямо сейчас, обходя состояние vuex для mapOptions в vuejs компонентах.

вот мой код:

<template>
    <div>
        <highcharts :constructor-type="'mapChart'" :options="mapOptions" class="map"></highcharts>
    </div>
</template>
<script>
import { mapState } from 'vuex'
 export default {
   created() {
        this.$store.dispatch('fetchCountries')
    },
    computed:{
        ...mapState(['countries', 'title'])
    },
    data() {
        return {
            mapOptions: {
                chart: {
                    map: 'myMapName'
                },
                title: {
                    text: this.title
                },
                credits: {
                    enabled: false
                },
                legend: {
                    title: {
                        text: 'Number of Confirmed cases'
                    }
                },
                mapNavigation: {
                    enabled: true,
                    buttonOptions: {
                        verticalAlign: 'top'
                    }
                },colorAxis: {
                    min: 1,
                    max: 100000,
                    type: 'logarithmic'
                },

                series: [{
                    type: 'map',
                    data: this.countries,
                    joinBy: ['name', 'Country'],
                    name: 'Country: ',
                    minSize: 4,
                    maxSize: '12%',
                    states: {
                        hover: {
                            color: '#a4edba'
                        }
                    }
                }]
            }
        };
    }
};

Я пишу так title: { text: this.title}, но это не сработало.

Я правильно получаю название и состояние стран из $ store, но когда я передаю их в mapOptions, данные не передаются.

Карта будет отображена, но без данных и заголовка.

Знаете, как я могу это исправить?

Answer 1

Свойство data инициализируется до вычисляемого, поэтому для исправления попытайтесь сделать mapOptions вычисляемым свойством:

computed:{
...mapState(['countries', 'title']),
 mapOptions(){ 

  return {
                chart: {
                    map: 'myMapName'
                },
                title: {
                    text: this.title
                },
                credits: {
                    enabled: false
                },
                legend: {
                    title: {
                        text: 'Number of Confirmed cases'
                    }
                },
                mapNavigation: {
                    enabled: true,
                    buttonOptions: {
                        verticalAlign: 'top'
                    }
                },colorAxis: {
                    min: 1,
                    max: 100000,
                    type: 'logarithmic'
                },

                series: [{
                    type: 'map',
                    data: this.countries,
                    joinBy: ['name', 'Country'],
                    name: 'Country: ',
                    minSize: 4,
                    maxSize: '12%',
                    states: {
                        hover: {
                            color: '#a4edba'
                        }
                    }
                }]
            }}

}

Answer 2

Vuex state является асинхронным. Вы устанавливаете data даже до того, как получите значение. Текстовое значение необходимо устанавливать только после получения обновленных данных.

async created() {
    this.$store.dispatch('fetchCountries')
    const title = await this.title
    this.mapOptions.title.text = title
}

Полный код

<template>
    <div>
        <highcharts :constructor-type="'mapChart'" :options="mapOptions" class="map"></highcharts>
    </div>
</template>
<script>
import { mapState } from 'vuex'
 export default {
   async created() {
        this.$store.dispatch('fetchCountries')
        const title = await this.title
        this.mapOptions.title.text = title
    },
    computed:{
        ...mapState(['countries', 'title'])
    },
    data() {
        return {
            mapOptions: {
                chart: {
                    map: 'myMapName'
                },
                title: {
                    text: ''
                },
                credits: {
                    enabled: false
                },
                legend: {
                    title: {
                        text: 'Number of Confirmed cases'
                    }
                },
                mapNavigation: {
                    enabled: true,
                    buttonOptions: {
                        verticalAlign: 'top'
                    }
                },colorAxis: {
                    min: 1,
                    max: 100000,
                    type: 'logarithmic'
                },

                series: [{
                    type: 'map',
                    data: this.countries,
                    joinBy: ['name', 'Country'],
                    name: 'Country: ',
                    minSize: 4,
                    maxSize: '12%',
                    states: {
                        hover: {
                            color: '#a4edba'
                        }
                    }
                }]
            }
        };
    }
};