背景
在Vue項目中，我們總會遇到一些公共數據的處理，如方法攔截厨埋，全局變量等，本文旨在解決這些問題
解決方案
事件總線
所謂事件總線病瞳，就是在當前的Vue實例之外揽咕，再創(chuàng)建一個Vue實例來專門進行變量傳遞悲酷，事件處理套菜，管理回調事件等
//main.js中
Vue.prototype.$bus = new Vue();
new Vue({...})
//頁面一
this.$bus.$on('sayName',(e)=>{
alert('我的名字是',e)
})
//頁面二
this.$bus.$emit('sayName','小明');//我的名字是 小明
原型掛載
所謂原型掛載，就是在main.js中將公共變量设易，事件逗柴，都掛在到Vue原型上
//main.js
Vue.prototype.$globalData = {}
Vue.prototype.$sayName = function(e){
console.log('我的名字是',e)
}
new Vue({...})
//組件一
Vue.prototype.$globalData.name='小明';
this.$sayName('小王');//我的名字是小王
//組件二
console.log(this.$sayName.name);//小明
this.$sayName('小王');//我的名字是小王
vuex
Vuex是Vue提供的一種，專門用來管理vue中的公共狀態(tài)顿肺，事件等等戏溺，以應用登錄為例
//新建store.js
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
export default new Vuex.Store({
state: {//此處為公共變量
userId:"",//用戶Id
loginSession:""http://用戶登錄憑證
},
mutations: {//此處為同步方法
setLoginSession(state,loginSession){//存入state中的用戶憑證
state.loginSession = loginSession;
},
setUserId(state,loginSession){//存入state中的用戶憑證
state.loginSession = 'user_'+Math.floor(Math.random()*100000000000);
}
},
actions: {//此處為異步方法
getUserId({state,commit},options={}){//從服務器取登錄憑證渣蜗，然后返回是否登錄狀態(tài)
return new Proise((resolve)=>{//返回一個promise對象，來讓調用者可以使用.then來進行下一步操作
axios.get('api').then((res)=>{
commit('setLoginSession',res.data.loginSession)
resolve(this.getters.isLogin)
})
}))
}
},
modules: {//此處為混入更多的vuex小模塊
},
gatters: {//此處為計算變量
isLogin(){
return (this.userId&&this.loginSession)?true:false
}
}
})
//main.js中注入vuex
import store from './store/store.js'
Vue.prototype.$store = store;
//app.vue中
export default {
data(){
return {}
},
mounted(){
this.$store.commit('setUserId');//設置用戶Id
this.$store.dispatch('getUserId').then((result)=>{//查詢登錄憑證旷祸，并返回登錄結果
console.log(this.$store.getters.isLogin,result);//true true 此處也可以查看計算屬性中的是否登錄狀態(tài)
if(result){
alert('登錄了')
}else{
alert('未登錄')
}
});
}
}
