//位于login.vue 中 
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('用戶名或密碼錯(cuò)誤'); 
  }); 
 } 
 } 
} 

var bus = new Vue() 
// 觸發(fā)組件 A 中的事件 
bus.$emit('id-selected', 1) 
// 在組件 B 創(chuàng)建的鉤子中監(jiān)聽事件 
bus.$on('id-selected', function (id) { 
 // ... 
}) 

import Vue from 'vue'; 
export default new Vue(); 

//位于login.vue 中 
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) { 
  /* 
  * 這里的 'login-on'是在Bus中自己構(gòu)造的一個(gè)事件（不需要在別處申明），通過emit()函數(shù) 
  * 手動(dòng)觸發(fā)這個(gè)事件，然后在user.vue 中可以監(jiān)聽這個(gè)事件，一旦發(fā)現(xiàn)事件觸發(fā)，就可以利用 
  * 回調(diào)函數(shù)接收 response 這個(gè)對象，達(dá)到信息傳遞的目的 
  * */ 
  Bus.$emit('login-on',response); 
  this.$router.replace({path: 'user'}); 
  }.bind(this)) 
  .catch(function (error) { 
  console.log(error); 
  alert('用戶名或密碼錯(cuò)誤'); 
  }); 
 } 
 } 
} 

//位于user.vue 中 
import Bus from '../bus.js'; 
export default { 
 mouted : { 
  Bus.$on('login-on', message => { // 這里的message就是從login.vue中傳來的數(shù)據(jù) 
  console.log(message); 
 }); 
 } 
}

Bus.$on('login-on', message => 

//位于store.js 中 
import Vue from 'vue' 
import Vuex from 'vuex' 
Vue.use(Vuex); 
export default new Vuex.Store({ 
 /* 
 * state指的就是儲存的數(shù)據(jù)， 
 * 下面的數(shù)據(jù)是我在項(xiàng)目中需要用的數(shù)據(jù)字段 
 * */ 
 state: { 
 has_login: false, 
 id: 1, 
 mobile_num: '', 
 name: '' 
 }, 
 /* 
 * mutations里面規(guī)定的就是想要改變state(數(shù)據(jù))的動(dòng)作函數(shù)， 
 * 下面的user_message 就是我將傳入的message賦值給倉庫中的 
 * state數(shù)據(jù)字段，達(dá)到更新數(shù)據(jù)的目的 
 * */ 
 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; 
 } 
 } 
}) 

//位于login.vue 中 
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) { 
  //這里調(diào)用 store.js中 mutations里面的user_message函數(shù)，從而改變倉庫中的state數(shù)據(jù) 
  userMessage.commit('user_message', response); 
  this.$router.replace({path: 'user'}); 
  }.bind(this)) 
  .catch(function (error) { 
  console.log(error); 
  alert('用戶名或密碼錯(cuò)誤'); 
  }); 
 } 
}) 

//位于user.vue 中 
import userMessage from '../store';