javascript - vuejs 原型(prototype)数组未被监视

Question

在我的 vuejs 程序中，我试图创建一个警报/通知系统的全局实例。这将位于应用程序的最根实例。然后我的计划是推送到一组对象并将其传递给组件。这只奏效了一半。

在我的 app.vue 中有

<template>
  <div id="app">
    <alert-queue :alerts="$alerts"></alert-queue>
    <router-view></router-view>
  </div>
</template>

在我的 main.js 中有

exports.install = function (Vue, options) {
  Vue.prototype.$alerts = []
}

我的 alert_queue.vue 是

<template>
  <div id="alert-queue">
    <div v-for="alert in alerts" >

    <transition name="fade">
      <div>
        <div class="alert-card-close">
          <span @click="dismissAlert(alert)"> &times; </span>
        </div>
        <div class="alert-card-message">
          {{alert.message}}
        </div>
      </div>
    </transition>

  </div>
  </div>
</template>

<script>
export default {
  name: 'alert',
  props: {
    alerts: {
      default: []
    }
  },
  data () {
    return {
    }
  },
  methods: {
    dismissAlert (alert) {
      for (let i = 0; i < this.alerts.length; i++) {
        if (this.alerts[i].message === alert.message) {
          this.alerts.splice([i], 1)
        }
      }
    }
  }
}

</script>

我现在可以使用 this.$alerts.push({}) 添加到这个列表，我可以看到它们是通过控制台添加的。记录结果。

问题是组件无法识别它们，除非我手动进入并通过更改代码中的某些内容并让 webpack 重新加载结果来强制它刷新。据我所知，没有办法以编程方式执行此操作...。有没有办法让原型(prototype)组件像应用程序的其余部分一样被监视？

我曾尝试让根目录的大多数文件都有一个 $alerts 对象，但是当我使用 $root.$alerts.push({}) 时它不起作用，因为 $root 是只读的。

还有其他方法可以解决这个问题吗？

Answer 1

你可以让 $alerts 成为一个 Vue 实例并将它用作事件总线:

exports.install = function (Vue, options) {
  Vue.prototype.$alerts = new Vue({
    data: {alerts: []},
    events: { ... },
    methods: { ... }
  })
}

然后在您的组件中，您可以调用一个方法 this.$alerts.addAlert()，该方法依次推送到数组并广播一个事件 alert-added。在其他地方，您可以使用 this.$alerts.on('alert-added', (alert) => { ... }

除此之外，我认为这是 Vuex 的一个很好的用例，它几乎是为此而设计的:https://github.com/vuejs/vuex