我有一个 vue3 应用程序并尝试启动并运行 vuex 4。
这是我的 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');
我的 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;
}
}
})
然后我想在组件中使用 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);
});
},
我在 this.$store.commit 上遇到了问题。我从来没有到达过“console.log("After commit");”这一行。相反,捕获函数被命中。控制台中没有错误消息。
我做错了什么?
亲切的问候,
休伯特
答案 0 :(得分:0)
我是 Vue 的新手……但我读到“突变必须是同步的”……然后你在异步代码中调用它。所以,创建一个动作女巫会调用突变,然后你调用动作。
actions: {
act_vernieuwAantalBankjes({commit}, data) {
commit('vernieuwAantalBankjes',data);
}
}
并调用异步代码中的操作: this.$store.dispatch('act_vernieuwAantalBankjes',this.aantalBankjes);