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

我假设您的通知组件中有一个数据对象。

Notification.vue的简化版本

# Require support, concerns, lib, validators dirs
%w(support concerns lib).each do |dir|
  Dir[Rails.root.join("spec/#{dir}/**/*.rb")].each { |f| require f }
end

我们在这里所做的是观察通知对象的更改。如果更改，我们会将通知编号放在文档标题的前面。

new Vue({ data: { notifications: [] }, watch: { notifications (current, previous) { document.title = '(' + current.length + ')' + document.title.replace(/ *\([^)]*\) */g, ""); } } })这部分是在用新计数更新之前删除当前的通知计数。

此方法的局限性：

如果标题中的括号中还有其他（单词），则会被剥夺。

如果通知计数为零，则将显示（0）标题。如果计数为1234，则将显示（1234）标题。您可能希望进行更多检查以免显示零，并且如果长度> 9

则执行9+

Answer 2

另一种方法是使用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/

中了解更多信息

获取页面的当前标题并从嵌套组件进行更新并在Vuejs 2中进行更新

2 个答案: