实时获取 Notification 组件中的 API - NuxtJS

Question

我觉得我有一个愚蠢的问题，但我需要你的帮助。我正在创建一个 通知组件，它总是被 Axios Real Time 通知（每次重新加载） 但我很难做到。

我的通知组件：

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

这一行 this.$store.dispatch('getNotification') 行不通？我怎样才能以最好的方式做到这一点，或者你们在 Github 中有示例项目给我看。请帮帮我！！！

Answer 1

您正在使用服务器端呈现的 nuxt.js。

mounted() 服务端渲染期间不调用生命周期钩子。

因此在 created() 挂钩

中调度操作

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

编辑： 您可以在 $route 属性上设置一个观察者，只要路线发生如下变化，它就会被调用：

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

实时获取 Notification 组件中的 API - NuxtJS

Get API in components of Notification by Real Time - NuxtJS

vue.js

vuejs2

vuex

nuxt.js

vuex-modules