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?
Estoy trabajando en un sitio web japonés, por lo que tenía las traducciones de Google activadas durante el desarrollo, lo que probablemente estaba interfiriendo con él. ¡Lo apagué y ahora funciona!