Tengo una tienda que inicializa su estado mediante la acción de acceder a la API. Tengo un componente principal y muchos componentes secundarios que usan el estado de la tienda como estado inicial de sí mismos. Además, estos componentes pueden modificar el estado y enviar nuevos datos a la API.

El problema es que los componentes dependen del estado y lo cambian, por lo que cuando lo hacen, la aplicación cae en un bucle infinito.

Por ejemplo (pseudocódigo):

Tienda:

 state: count = 0 mutations: set (state, count) {state.count = count} actions: fetch(context) { api.get('count').then(res => context.commit('set', res)) } set_and_save(context, count) { api.post('save_count', count); context.state.commit('set', count) }

Componente principal que inicializa los datos de la tienda:

 mounted () {this.$store.dispatch('counter/fetch')}

Componente hijo:

 computed: { counter () {return this.$store.state.counter.count} } watch: { // This component will be rendered before state initializes from API, so that // we should watch for counter to update counter() {this.currentCount = this.counter} // If we change counter (for example, by pressing the button), we should // change state and send data to API currentCount () { this.$store.dispatch('counter/set_and_save', this.currentCount) } }

Entonces, cuando la API devuelve datos, counter() vuelve a calcular, luego cambia currentCount, lo que ejecuta una acción que cambia de estado, lo que hace que counter() vuelva a calcular, etcétera. Ese es el problema.

Creo que este es un problema común, pero no encontré nada al respecto. Intenté las siguientes cosas: — Para crear una bandera bool y no ejecutar la acción si es verdadera (heterosexual, estúpido, no genial); — Para dejar de mirar currentCount mientras ejecutamos counter() (raro); — Para asegurarnos de que en el momento en que renderizamos el componente secundario definitivamente inicializamos el estado (complicado y provocará un renderizado largo); — ???

Lo único importante: no podemos usar store.state.count directamente, porque en la tarea real la lógica es complicada (el estado es una lista, y en el componente dividimos esa lista en cuatro listas diferentes, las representamos y luego, cuando queremos guarde el estado, los volvemos a armar y enviamos a la acción).

Entonces, ¿quizás ese problema no tiene una buena solución?