javascript - VueJs 中的 Highmaps...将 State 传递给 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 时，数据将不会被传递。

map 将被渲染，但没有数据和标题。

你知道我该如何解决吗？

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'
                        }
                    }
                }]
            }}

}