從0開始探究vue-公共變量的管理

背景

在Vue項目中，咱們總會遇到一些公共數據的處理，如方法攔截，全局變量等，本文旨在解決這些問題

解決方案

事件總線

所謂事件總線，就是在當前的Vue實例以外，再建立一個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中的公共狀態，事件等等，以應用登陸爲例

//新建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:""//用戶登陸憑證
  },
  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={}){//從服務器取登陸憑證，而後返回是否登陸狀態
        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  此處也能夠查看計算屬性中的是否登陸狀態
            if(result){
                alert('登陸了')
            }else{
                alert('未登陸')
            }
        });
    }
}