Just recently, I put together a small test page and store to showcase something. Based on the code, it was expected to display count = 1 initially, and then after 500ms, it should update to count = 2 as the store gets updated.
Have a look at my test.vue:
<template>
<div>count = {{ count }}</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
layout: "test",
computed: {
...mapGetters({ count: "test/count" }),
},
mounted() {
this.$store.dispatch("test/updateCount");
},
};
</script>
And here's the content of store/test.js:
export const state = () => ({
count: 1
});
export const getters = {
count(state) {
return state.count;
}
};
export const actions = {
updateCount(context) {
setTimeout(() => {
context.commit("setCount", 2);
}, 500);
}
};
export const mutations = {
setCount(state, value) {
state.count = value;
}
};
Despite all this, I always see count = 1 in the DOM
In vue devtools, both vuex bindings and vuex state reflect count = 2, but for some reason, it doesn't get updated in the DOM.
Interestingly, removing the setTimeout function in actions seems to make it work properly.
Can anyone spot what might be going wrong?