無法讀取未定義的 VueJS 的屬性“調度”

Question

當我在方法 drawMap() 中調用突變操作時遇到問題。 所以，我在 main.js 中注冊了我的商店組件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

在我的組件下方，我在另一個方法 DRAWMAP 中調用操作，但出現錯誤

'無法讀取未定義 VueJS 的屬性 'dispatch' '

. 我怎么了？

   <script>
window.jQuery = require('jquery');
var $ = window.jQuery;
require('jvectormap');
require('../lib/jquery.vmap');
require('../lib/jquery.vmap.ukraine');
import {mapGetters} from 'vuex';

export default {
    data() {
        return {
            currentRegion: 'Львівська область',
            counter: 0
        }
    },
    mounted() {
        this.drawMap();
        this.$store.dispatch('SET_REGION', this.currentRegion);
    },
    computed: {
        ...mapGetters(['CHOOSED_REGION']),
    },  
    methods: {
        drawMap(){
            $('#vmap').vectorMap({
                map: 'ukraine_ua',
                onRegionClick: function(element, code, region)
                {
                    this.currentRegion = region;
                    this.$store.dispatch('SET_REGION', this.currentRegion);
                }
            });
        },
    }
}
</script>

Answer 1

嘗試更改onRegionClick以使用箭頭函數，以便this.$store.dispatch引用頂級對象。

onRegionClick: (element, code, region) => {
  this.currentRegion = region;
  this.$store.dispatch('SET_REGION', this.currentRegion);
}