Получение текущего заголовка страницы и обновление из вложенного компонента и обновление в Vuejs 2

Question

У меня есть компонент с именем Notificiations.vue, который импортируется и используется в том же родительском компоненте, где также используется мой вид маршрутизатора.

Очень простой пример - мой App.vue выглядит примерно так:

<Template>
<Notifications></Notifications>
<router-view></router-view>
</Template>

Большинство отдельных страниц, к которым можно получить доступ через маршрутизатор, имеют компонент, который устанавливает заголовок страницы, как показано ниже:

metaInfo: function () {
            return {
                title: 'Leads - ' + this.view
            }
        }

Что я хочу сделать с Notifications.vue, так это когда бы ни приходило новое уведомление, получайте текущий заголовок вкладки браузера и просто добавляйте (1) (или любой другой номер) перед ним. Я пытался использовать обычный Document.title, чтобы получить текущий заголовок, но он всегда возвращает undefined. Как еще я могу это сделать?

Answer 1

Альтернативным подходом было бы использование Vuex для управления состоянием.

const store = new Vuex.Store({
  state: {
    notifications: []
  },
  mutations: {
    load (state, notifications) {
      state.notifications = notifications
    }
  },
  actions: {
    load (context) {
      Vue.$http.get('/notifications').then(response = {
        context.commit('load', response.data);
      })
    }
  }
});

// Notifications.vue
new Vue({
  mounted () {
    // you will want to add more than just an interval. You will want to keep track of this and perhaps stop it if, for example, the user logs out.
    setInterval(function () {
      store.dispatch('load');
    }.bind(this), 1000)
  }
});


// Add to your router
metaInfo: function () {
  return {
    title: '(' + store.state.notifications + ')' + 'Leads - ' + this.view
  }
}

Это был быстрый пример того, как использование Vuex решит эту проблему. Это не проверено и предназначено только для образовательных целей. Узнайте больше на https://vuex.vuejs.org/guide/

Answer 2

Я предполагаю, что у вас есть объект данных в вашем компоненте уведомлений.

Упрощенная версия Notification.vue

new Vue({
  data: {
    notifications: []
  },
  watch: {
    notifications (current, previous) {
      document.title = '(' + current.length + ')' + document.title.replace(/ *\([^)]*\) */g, "");
    }
  }
})

То, что мы здесь делаем, это отслеживание изменений в объекте уведомлений. Если он меняется, мы добавляем номер уведомления к заголовку документа.

document.title.replace(/ *\([^)]*\) */g, "") эта часть удаляет текущее количество уведомлений перед обновлением новым счетом.

Ограничения для этого подхода:

Если в скобках есть другие слова в словах, они будут удалены.

Если счетчик уведомлений равен нулю, он будет отображать (0) заголовок, если счет равен 1234, он будет отображать (1234) заголовок. Возможно, вы захотите поставить еще несколько проверок, чтобы не показывать НОЛЬ, и, возможно, сделать 9+, если длина> 9