リアルタイムで通知のコンポーネントにAPIを取得する - NuxtJS

Question

私は思っていますが、あなたの助けが必要です。 私はを作成しています。Axios Real Time（毎回Reload everytime）によって通知される通知コンポーネントはですが、私はそれを作るのが紛らわしいです。

マイ通知コンポーネント：

<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> 

モジュールの通知：/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 
} 

このラインこの$のstore.dispatch（ 'getNotification'）しません作業？どのようにして最善の方法でそれをやり遂げることができますか、Githubのサンプルプロジェクトがありますか？私を助けてください ！！！

Answer 1

サーバ側でレンダリングされているnuxt.jsを使用しています。

mounted()ライフサイクルフックは、サーバー側のレンダリング中に呼び出されません。

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