¿Hay alguna manera de enviar acciones entre dos módulos vuex con espacios de nombres?

159

¿Es posible despachar una acción entre módulos de espacio de nombres?

Por ejemplo, tengo los módulos vuex "tablero" y "notificación". Cada uno tiene un espacio de nombres. Me gustaría enviar una acción desde el tablero de juego al módulo de notificación.

Pensé que podría usar el nombre del módulo en el nombre de la acción de envío como este:

// store/modules/gameboard.js
const actions = {
    myaction ({dispatch}) {
        ...
        dispatch('notification/triggerSelfDismissingNotifcation', {...})
    }
}

// store/modules/notification.js
const actions = {
    triggerSelfDismissingNotification (context, payload) {
        ...
    }
}

Pero cuando trato de hacer esto, recibo errores que me hacen pensar que vuex está tratando de enviar una acción dentro de mi módulo de tablero de juego:

[vuex] tipo de acción local desconocida: notificación / triggerSelfDismissingNotification, tipo global: tablero / notificación / triggerSelfDismissingNotification

¿Hay alguna forma de despachar de módulo vuex a módulo o necesito crear algún tipo de puente en la instancia vuex raíz?

vue.js vuejs2 vuex Chris Schmitz
fuente

Respuestas:

344

Solo necesita especificar que está enviando desde el contexto raíz:

// from the gameboard.js vuex module
dispatch('notification/triggerSelfDismissingNotifcation', {...}, {root:true})

Ahora, cuando el envío llega a la raíz, tendrá la ruta de espacio de nombres correcta al módulo de notificaciones (en relación con la instancia raíz).

Esto supone que está configurando namespaced: truesu módulo de tienda vuex.

Jake
fuente
39
Este es el único éxito en Internet para mi búsqueda de una solución. Gracias por responder.
Peter Roehlen
9
Para ser justos, está documentado aquí vuex.vuejs.org/en/modules.html en "Acceso a activos globales en módulos de espacios de nombres". Aunque es un poco incómodo asimilarlo.
Jake
2
Me encanta vue, pero me parece que vuex agrega más capas de dificultad en lugar de hacerlo más simple. Ahora sé que este no es el propósito de vuex, pero aún así, ¿no es molesto que siempre tenga que estar al tanto de algunas convenciones como en este ejemplo? notification/triggerEntonces, si quiero que sea un poco más genérico ${NOTIF_TYPE_NAME}/${NOTIF_TRIGGER_ACTION}, todavía necesito la barra oblicua, o incluso crear una función auxiliar para esto, siento que cuando quiero que mi aplicación sea más modular, pago mucho más de lo que obtengo. Esta es mi opinión
Dima Gimburg
11
Puedes usar this.dispatch. No tiene por qué {root: true}. Esto es global.
MKatleast3
66
No tienes que usar {root: true}. El caso que quiso decir es probablemente el envío a un módulo secundario, que de hecho (y obviamente) no necesita este indicador.
kursus
0

Como se mencionó @ MKatleast3

Puedes usar this.dispatch. No necesita {root: true}opciones de despacho. Esto es global.

Slowaways
fuente