vuejs2 - matched - vue router reference

La mejor práctica para cambiar la ruta(VueRouter) después de una mutación(Vuex)

Question

He buscado mucho, pero no hay una respuesta clara a eso. Básicamente, ¿cuál debería ser la mejor práctica para cambiar automáticamente una ruta después de una mutación?

Ejemplo: hago clic en un botón para iniciar sesión () -> inicio de sesión de acción que hace una llamada http -> mutación LOGIN_SUCCESSFUL -> quiero redirigir al usuario a la página principal $router.go()

• ¿Debo envolver la acción en Promesa y luego escuchar el resultado para llamar al cambio de ruta desde el componente?

• ¿Debo hacerlo directamente desde la $store ?

• ¿ vuex-router-sync ayuda de alguna manera?

¡Muchas gracias!

Answer 1

La respuesta a estas preguntas parece ser poco clara en la comunidad de Vue.

La mayoría de la gente (incluyéndome a mí) diría que la mutación de la tienda no debería tener ningún efecto además de mutar la tienda. Por lo tanto, se debe evitar hacer el cambio de ruta directamente en $store .

He disfrutado mucho con su primera sugerencia: envolver la acción en una promesa y cambiar la ruta desde el uso de su componente tan pronto como se resuelva la promesa.

Una tercera solución es usar watch en su componente, para cambiar la ruta tan pronto como su estado LOGGED_IN_USER (o como lo llame) ha cambiado. Si bien este enfoque te permite mantener tus acciones y mutaciones 100% limpias, descubrí que se vuelven desordenadas muy, muy rápido.

Como resultado, sugeriría ir por la ruta de la promesa.

Answer 2

Ponga un detector de eventos en su archivo app.vue y luego emita en event mediante su función de mutación. Pero sugiero que envolver la acción en una promesa sea una buena manera

App.vue:

import EventBus from ''./eventBus'';

 methods: {   
    redirectURL(path) {
      this.$router.go(path)}
    },

 created() {
  EventBus.$on(''redirect'', this.redirectURL)
 }

mutación:

import EventBus from ''./eventBus'';

LOGIN_SUCCESSFUL() {
  state.blabla = "blabla";
  EventBus.$emit(''redirect'', ''/dashboard'')

}