0

Hola tengo el siguiente inconveniente, estoy actualizando el estado desde un componente y mostrando el contenido de esta variable en otro, en el componente que se ejecuta el commit el estado cambia pero en el componente que muestra la informacion no se actualiza.

  state: {
    message: 'Message test'
  }      
  newMessage (state) {
    state.message = new Date()
  }      
  changeMessage ({commit}) {
    commit('newMessage')
  }
// Este es el componente que debe mostrar cuando cambio el estado
  div {{message}}
  import { mapState } from 'vuex'
  export default {
    computed: {
      ...mapState({
        message: state => state.message
      }),
    }
  }

Image introducir la descripción de la imagen aquí

4
  • Puedes colocar el código donde estas imprimiendo la variable message. el 5 nov. 2017 a las 21:59
  • Listo ya lo coloque el 7 nov. 2017 a las 22:30
  • Trate de replicarlo jsbin.com/josimologa/edit?html,js,output, aun así me funciona el cambio de estado. Sabes si hay otra información que puedas dar para brindarte ayuda. el 7 nov. 2017 a las 23:24
  • Lo que sucede es que lo haces en un componente, yo el commit a la mutation lo hago desde el componente A en una ventana y quien muestra la info es el componente B eso es lo que me falla que el componente B no muestra el estado actualizado el 8 nov. 2017 a las 3:43

1 respuesta 1

0

Para editar los datos en VUEX hay que hacerlo únicamente a través de las mutaciones y estas son llamadas en las acciones despachadas

dispatch -> mutation -> state

Es una arquitectura unidireccional, para evitar conflictos y organizar el estado de la aplicación.

state: {
    message: 'Message test'
},    
mutations: {
    newMessage (state) {
        state.message = new Date()
    }
},
actions: {
    addMessage ({commit}) {
        commit('newMessage')
    }
}

En el componente que cambia el mensaje sería así:

methods: {
    addMessage () {
         this.$store.dispatch('addMessage')
    }
}

El componente que lee el mensaje, y se actualiza cada vez que cambie:

computed: {
    message () {
        return this.$store.state.message
    }
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.