VueJs中的高图…将状态传递给mapOptions

Question

我现在在将vuex状态绕过vuejs组件中的mapOptions时遇到问题。

这是我的代码：

<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作为计算的属性：