Vuex：无法正确初始化存储

Question

我有一个 vue3 应用程序，并尝试启动并运行 vuex 4。

这是我的主要.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');

我的店铺.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;
        }
    }
})

然后我想在组件中使用 vuex 存储。此组件最重要的代码：

<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);
        });
    },

我在这个.$store.commit遇到了一个问题。我从未到达“ console.log（”提交后“）;”行。相反，捕获功能被击中。控制台中没有错误消息。

我做错了什么？

亲切问候

休 伯特

Answer 1

我是 Vue 的新手...但我读到“突变必须是同步的”......并在异步代码中调用它。所以，创建一个动作女巫会调用突变，你调用动作。

actions: {
  act_vernieuwAantalBankjes({commit}, data) {
     commit('vernieuwAantalBankjes',data);
  }
}

并调用异步代码中的操作：this.$store.dispatch（'act_vernieuwAantalBankjes'，this.aantalBankjes）;