登錄vuejs後重新呈現導航欄

我試圖用vue創建一個客戶端登錄，我有主要組件和嵌套的導航欄和呈現內容的組件關於創建導航組件我檢查如果用戶登錄以顯示客人按鈕並隱藏受保護部分的按鈕我的問題是在我登錄組件上提交登錄後我不知道如何觸發我的導航欄組件的重新重新化顯示正確的按鈕登錄vuejs後重新呈現導航欄

我不知道我是否應該在我的主要組件上有一個全局變量，或者我是否應該找到一種方法來發送一個事件從孩子到父親，並從主要組件發出另一個導航欄或也許是更簡單，但我沒有想法

如果您需要更多的信息，只是讓我知道提前感謝

來源

2017-05-25 Mirdrack

的主要問題是如何建立同一層次的組件之間的通信，爲解決這個我實現了與事件總線方式的Vue.js文件上描述：

https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication

我剛剛創建的Vue的新實例名爲EventBus

// EventBus.js 
import Vue from 'vue' 
export default new Vue()

然後我包括這在全球範圍上我的主要Vue的實例

// main.js 
import EventBus from './EventBus' 
import Vue from 'vue' 
import App from './App' 
import router from './router' 

Vue.config.productionTip = false 

Vue.prototype.$bus = EventBus 

/* eslint-disable no-new */ 
new Vue({ 
    el: '#app', 
    router, 
    template: '<App/>', 
    components: { App } 
})

有了這個，我能發出對我的組件的事件，並與同一層級這樣聽他們對其他組件：

// Login.Vue 
import axios from 'axios' 
export default { 
    name: 'login', 
    data() { 
     let data = { 
      form: { 
        email: '', 
        password: '' 
      } 
     } 
     return data 
    }, 
    methods: { 
     login() { 
      axios.post('http://rea.app/login', this.form) 
      .then(response => { 
       let responseData = response.data.data 
       this.$localStorage.set('access_token', responseData.token) 
       this.$bus.$emit('logged', 'User logged') 
       this.$router.push('/') 
      }) 
      .catch(error => { 
       if (error.response) { 
        console.log(error.response.data) 
        console.log(error.response.status) 
        console.log(error.response.headers) 
       } 
      }) 
     } 
    } 
}

而且我可以聽我的其他組件的觸發事件的創建方法是這樣設置監聽器：

// NavBar.js 
export default { 
    template: '<Navigation/>', 
    name: 'navigation', 
    data() { 
     return { 
      isLogged: this.checkIfIsLogged() 
     } 
    }, 
    created() { 
     this.$bus.$on('logged',() => { 
      this.isLogged = this.checkIfIsLogged() 
     }) 
    } 
}

希望可以作爲參考

來源

2017-06-09 15:15:21 Mirdrack

登錄vuejs後重新呈現導航欄

回答

相關問題