Get API in components of Notification by Real Time - NuxtJS

Question

I have a dumb question I think but I need your help. I am creating a Notification components which always get noti by Axios Real Time (Reload everytime) but I'm confusing to make it.

My Notification Components:

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

Modules Notification: /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
}

This line this.$store.dispatch('getNotification') doesn't work? How can I do it in the best way or do you guys have example project in Github show me. Please help me !!!

Answer 1

You are using nuxt.js which is server side rendered.

mounted() lifecycle hook is not called during server-side rendering.

So dispatch the action in created() hook

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

EDIT: You can setup a watcher on $route property which will be called whenever the route changes as follows:

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