Question

我认为我有一个愚蠢的问题，但我需要你的帮助。我正在创建一个通知组件，它总是通过Axios Real Time获取noti（每次重新加载）但我很难实现它。

我的通知组件：

<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()生命周期钩子。

所以在created() hook

中调度动作

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

修改您可以在$route属性上设置一个观察程序，只要路由发生变化，就会调用它，如下所示：

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

通过Real Time - NuxtJS获取通知组件中的API

1 个答案: