Reputation: 9583
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 !!!
Upvotes: 0
Views: 1511
Reputation: 31352
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')
}
}
Upvotes: 1