Sé que se ha hecho una pregunta similar aquí , pero la mía es un poco diferente, el estado que quiero ver está dentro de algunos módulos anidados. en el enlace de arriba me sugirieron que puedo ver el estado de esta manera:
watch: { '$store.state.drawer': function() { console.log(this.$store.state.drawer) } } Pero mi estado está en módulos anidados como mencioné, algo así como store/moduleOne/moduleTwo/moduleThree Ellos sugirieron hacer esto:
$store.state.moduleOne.moduleTwo.moduleThree.something¡Pero lo probé y muchas más variaciones y no funcionó! ¡Pregunté en la publicación original y no hubo respuestas!
Entonces, mi pregunta es cómo puedo ver un estado, llamémoslo price y digamos que está en la store/moduleOne/moduleTwo/moduleThree y luego registrar su valor en mi componente cada vez que cambia usando (usar las funcionalidades del map no es un problema y es preferible)
Asumiendo módulos anidados declarados en Vuex 4 como este:
import { createStore } from 'vuex' export default createStore({ modules: { moduleOne: { namespaced: true, modules: { moduleTwo: { namespaced: true, modules: { moduleThree: { namespaced: true, state: () => ({ price: 0, }), mutations: { SET_PRICE(state, price) { state.price = price }, }, }, }, }, }, }, }, }) ...el observador del estado del price en el moduleThree sería:
export default { watch: { '$store.state.moduleOne.moduleTwo.moduleThree.price'(price) { console.log({ price }) } } }