Vuex: cannot get store properly initialised - vue.js

Question

I have a vue3 application and try to get vuex 4 up and running.
This is my main.js:
import { createApp } from 'vue'
import App from './App.vue'
import 'leaflet/dist/leaflet.css';
import { Icon } from 'leaflet';
import mitt from 'mitt';
import store from './store';
/* Theme variables */
import './theme/variables.css';
delete Icon.Default.prototype._getIconUrl;
Icon.Default.mergeOptions({
iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
iconUrl: require('leaflet/dist/images/marker-icon.png'),
shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});
export const eventHub = mitt();
const app = createApp(App)
.use(IonicVue)
.use(store);
app.mount('#app');
My store.js:
import { createStore } from 'vuex'
export const store = createStore({
state() {
return {
aantalBankjes: 0
}
},
mutations: {
vernieuwAantalBankjes(state, n) {
// mutate state
state.aantalBankjes = n;
console.log("Store: vernieuwAantalBankjes");
console.log(n);
}
},
getters: {
getAantalBankjes(state) {
return state.aantalBankjes;
}
}
})
I then want to use the vuex store in a component. The most important code of this component:
<template>
<div id="myMap" style="width: 100%; height: 100%"></div>
</template>
<script>
import L from "leaflet";
import { eventHub } from "../main";
import { Geolocation } from "#capacitor/geolocation";
import icons from "../mixins/icons.js";
const axios = require("axios");
export default {
methods: {
getBankjes() {
let vertices = this.calculateRetrievalArea(this.map.getCenter());
axios
.get(
"https://www.evenuitrusten.nl/api/area?lngLow=" +
vertices.lngLow +
"&lngHigh=" +
vertices.lngHigh +
"&latLow=" +
vertices.latLow +
"&latHigh=" +
vertices.latHigh +
"&number=200"
)
// .get("https://www.evenuitrusten.nl/api/area/test")
.then((response) => {
this.bankjes = response.data;
console.log("Bankjes: axios has returned data");
this.placeMarkers(this.bankjes);
this.aantalBankjes=this.bankjes.length;
console.log("Before commit");
this.$store.commit('vernieuwAantalBankjes',this.aantalBankjes);
console.log("After commit");
return this.bankjes;
})
.catch(function (error) {
// handle error
console.log("bankjes:" + error.response);
});
},
I run into a problem at this.$store.commit. I never reach the line " console.log("After commit");". Instead the catch-function is hit. There is no error message in the console.
What am I doing wrong?
Kind regards,
Hubert

Answer 1

I am new in Vue... but i read that "Mutations Must Be Synchronous"... and you call it in asynchronous code. So, create an action witch will call the mutation and you call the action.
actions: {
act_vernieuwAantalBankjes({commit}, data) {
commit('vernieuwAantalBankjes',data);
}
}
and call the action in the asynchronous code:
this.$store.dispatch('act_vernieuwAantalBankjes',this.aantalBankjes);