Para fines de demostración, creé una pequeña página de prueba y una tienda. De acuerdo con el código, debería mostrar count = 1, luego 500 ms más tarde count = 2 a medida que se actualiza la tienda.

Aquí está mi prueba.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>

tienda/prueba.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; } };

Pero el resultado siempre es contar = 1 en DOM

En vue devtools, tanto los enlaces de vuex como el estado de vuex muestran un recuento = 2, pero no se actualizan en DOM.

Sin embargo, funciona si elimino la función setTimeout en acciones.

¿Estoy haciendo algo mal?