0

我想我有一个愚蠢的问题，但我需要你的帮助。我正在创建一个通知组件，它总是通过 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 中的示例项目给我看。请帮我 ！！！

4

1 回答 1

1

您正在使用服务器端渲染的 nuxt.js。

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

created()所以在钩子中调度动作

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

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

watch: { 
    '$route' (to, from) { 
        // react to route changes... 
        this.$store.dispatch('getNotification') 
    } 
}
于 2017-12-19T08:04:15.143 回答