Problem description: Recently, I encountered a scene when I was doing the login part, When clicking
“ user” Button time, First renderlogin assembly, Jump to user information interface directly after user login(user assembly). There is a need tologin The user information obtained by the component through asynchronous request is transmitted to
user assembly, howeverlogin andlogin Component is not a parent-child component, It's called brother component for the time being. In short, What I want to solve is the problem of information transfer between brother components.


// Be locatedlogin.vue in export default { methods:{ login(){ this.$axios({ method:
'post', url: '/student/login/', data: { username: this.username, password:
this.password } }) .then(function (response) { this.$router.replace({path:
'user'}); }.bind(this)) .catch(function (error) { console.log(error);
alert(' Wrong user name or password'); }); } } }
After the asynchronous request is completed, Jump touser Component, howeverresponse The request return information of cannot be passed to the non parent-child componentuser Component.



.............................................................................................................................................................................................................

Solve the problem:

One, First of all, I thought oflogin assembly and user Put components together( Two components combined2 by1), Avoid information transfer between components, But this solution is toolow, Destroy the original structure of the project.

Two, I found out from the documents


Communication is also required between two components of a non parent-child relationship. In a simple scenario, You can use an empty Vue Instance as event bus: var bus = new Vue() // Trigger module A
Events in bus.$emit('id-selected', 1) // In component B Listening events in the created hook bus.$on('id-selected',
function (id) { // ... }) Take your own problems as an example, Write specific implementation:(warning:   My own situation can't be solved in this simple way)


It's better to create a new one firstjs file, To create oureventBus, We call itbus.js


import Vue from 'vue'; export default new Vue(); Then in login.vue In file:



// Be locatedlogin.vue in import Bus from '../bus.js'; export default { methods:{
login(){ this.$axios({ method: 'post', url: '/student/login/', data: {
username: this.username, password: this.password } }) .then(function (response)
{ /* * There 'login-on' Is inBus A self constructed event in( There's no need to state it elsewhere), adoptemit() function *
Trigger this event manually, Then inuser.vue You can listen to this event in, Once an event is found, it triggers, You can use it * Callback function receive response This object, Achieve the purpose of information transmission
* */ Bus.$emit('login-on',response); this.$router.replace({path: 'user'});
}.bind(this)) .catch(function (error) { console.log(error); alert(' Wrong user name or password');
}); } } } stayuser.vue In file:// Be locateduser.vue in import Bus from '../bus.js'; export
default { mouted : { Bus.$on('login-on', message => { //
Theremessage It is fromlogin.vue Data from console.log(message); }); } } This completes the data transfer.


But it was found during the test thatuser.vue Component monitoring Not triggered

Analysis: In the situation I met,login.vue Component anduser.vue
Components are substitutes, That is to say, fromlogin Component passingvue-router Jump touser assembly, staylogin.vue Destroy before renderinguser.vue assembly, So inuser.vue Medium
Bus.$on('login-on', message => Listening starts after events and triggers, Callback function will not be generated naturally.


From this we can see that, Officially recommendedeventbus The flaw in the solution is, During data transfer, Both components must have been rendered. In my situation, This method is not applicable.

Three,vuex Solution:
be familiar withvuex Please skip it.

Best insrc Create a new file in the root directory of, call store.js


// Be locatedstore.js in import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex);
export default new Vuex.Store({ /* * state It refers to the stored data, * The following data are the data fields I need to use in my project * */
state: { has_login: false, id: 1, mobile_num: '', name: '' }, /* *
mutations It's about changingstate( data) Action function of, * Underneathuser_message It's what I'm going to introducemessage Assigned to *
state Data field, To update data * */ mutations: { user_message (state, message) {
state.has_login = true; state.id = message.data.id; state.mobile_num =
message.data.mobile_num; state.name = message.data.name; } } })


Then inlogin.vue Component, Submit received user information


// Be locatedlogin.vue in import userMessage from '../store'; export default new
Vuex.Store({ methods: { loginSubmit () { this.$axios({ method: 'post', url:
'/student/login/', data: { username: this.username, password: this.password }
}) .then(function (response) { // Call here store.js in
mutations Insideuser_message function, To change thestate data userMessage.commit('user_message',
response); this.$router.replace({path: 'user'}); }.bind(this)) .catch(function
(error) { console.log(error); alert(' Wrong user name or password'); }); } })
Last inuser.vue Received in componentvuex Information stored in the warehouse, That is, to import the warehouse first



// Be locateduser.vue in import userMessage from '../store'; Then you can directly userMessage.state
Assign touser.vue Data fields in scope, meanwhile,vuex Ofstate Properties with hot update, Useful for data synchronization, Many advantages.


therefore, Large and medium-sized projects are still directly used at the beginningvuex It's a wise decision, Great convenience for development.