Cómo utilizar vuex para implementar la comunicación de componentes hermanos
vuex es principalmente para la interacción de datos. Se puede decir que es muy fácil transferir valores entre componentes principales y secundarios, pero para transferir valores entre componentes hermanos, es necesario pasar. el valor al componente principal primero y luego Pasar valores a los subcomponentes es extremadamente problemático.
El siguiente artículo le presentará el método de comunicación de los componentes de vuex brother. No entraré en más detalles a continuación. Echemos un vistazo a la introducción detallada.
1. idea
p>La idea central de usar vuex para la comunicación de componentes hermanos es usar vuex como espacio de almacenamiento (esta es también una de las razones para diseñar vuex. Cada subcomponente almacena sus datos). en él, y cada subcomponente almacena sus datos en.
vue
& lt;div id="app">
Componente hijo ChildB
< div id= "childB">
Soy el componente B</h1>
< /template>
módulo vuex store.js
importar Vue desde 'vue'
importar Vuex desde 'vuex'
Vue.use(Vuex)
const state = {
// Inicializa los datos de los componentes A y B, esperando ser obtenidos
AMsg: '',
BMsg: ''
}
const mutaciones = {
recibirAMsg(estado, carga útil) {
// Almacena datos del componente A en estado
state.AMsg = payload.AMsg
},
recibirBMsg(state, payload) {
// Almacena datos del componente B en el estado
p>estado.BMsg = carga útil.AMsg
},