Get API in Komponenten der Benachrichtigung durch Echtzeit - NuxtJS

Question

Ich habe eine dumme Frage, die ich denke, aber ich brauche deine Hilfe. Ich erstelle eine Benachrichtigung Komponenten, die immer noti von Axios Real Time (immer neu laden), aber ich bin verwirrend, es zu machen.

Meine Komponenten Benachrichtigung:

<template> 
    <ul class="tab-content"> 
    <notification-item></notification-item> 
    </ul> 
</template> 
<script> 
import ItemNotification from '~/components/header/NotificationItem.vue' 
export default { 
    components: { 
    'notification-item': ItemNotification 
    }, 
    created() { 
    this.$store.dispatch('getNotification') 
    } 
} 
</script> 

Module Benachrichtigung: /store/notification.js.

import api from '~/plugins/axios' 

const state =() => { 
    return { 
    notifications: null 
    } 
} 

const actions = { 
    getNotification ({commit}, config) { 
    api.get(`/notifications/`, config) 
    .then(response => { 
     commit('GET_NOTIFICATION', response.data) 
    }) 
    } 
} 
const getters = {} 

const mutations = { 
    GET_NOTIFICATION (state, notifications) { 
    state.notifications = notifications 
    } 
} 

export default { 
    state, 
    actions, 
    getters, 
    mutations 
} 

Diese Zeile dieses $ store.dispatch ('getNotification') nicht Arbeit? Wie kann ich es am besten machen oder hast du ein Beispielprojekt in Github, zeig es mir. Bitte hilf mir !!!

Answer 1

Sie verwenden nuxt.js, die serverseitig gerendert wird.

mounted() Lifecycle-Hook wird beim serverseitigen Rendern nicht aufgerufen.

Versand So die Aktion in created() Haken

created() { 
    this.$store.dispatch('getNotification') 
} 

EDIT: Sie können auf $route Eigenschaft ein Beobachter-Setup, die aufgerufen werden, um die Route ändert, wenn Sie wie folgt vor:

watch: { 
    '$route' (to, from) { 
     // react to route changes... 
     this.$store.dispatch('getNotification') 
    } 
}