Javascript 未监视vuejs原型阵列

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

在我的app.vue中，我有

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

我的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>

&时代；
{{alert.message}
导出默认值{
名称：“警报”，
道具：{
警报：{
默认值：[]
}
},
数据（）{
返回{
}
},
方法：{
解除警报（警报）{
for（设i=0；i

我现在可以使用

this.$alerts.push（{}）

添加到此列表，我可以看到它们是通过console.logging结果添加的

问题是，除非我手动进入并通过更改代码中的某些内容并让webpack重新加载结果来强制它刷新，否则组件无法识别它们。就我所见，没有办法通过编程来实现这一点。。。。有没有一种方法可以让原型组件像应用程序的其他部分一样受到关注

我已尝试使最根的文件具有$alerts对象，但当我使用

$root.$alerts.push（{}）

时，它不起作用，因为$root是只读的

---

还有其他方法吗？

您可以将

$alerts

制作为Vue实例，并将其用作事件总线：

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

然后在您的组件中，您可以调用一个方法

this.$alerts.addAlert（）

，该方法依次推送到阵列并广播添加的事件

alert

。在其他地方，您可以使用

this.$alerts.on（'alert-added'，（alert）=>{…}

---

除此之外，我认为这是Vuex的一个很好的用例，Vuex的设计基本上就是这样的：

在

Vue上定义的属性。prototype

不像Vue实例的数据属性那样是被动的

我同意，在大多数情况下，Jeff的方法或使用Vuex是可行的

---

但是，您可以简单地将此设置为Vue实例的数据属性。$alerts，然后通过关联更新该属性（这将是反应性的）将更新全局

$alerts

数组：

Vue.prototype.$alerts=['Alert#1']；
Vue.component（'子'{
模板：`{i}}`，
道具：['items']，
})
新Vue({
el:“#应用程序”，
数据（）{
返回{
globalAlerts:这是$alerts，
}
},
方法：{
addToArray（）{
this.globalAlerts.push（'Alert#'+（this.globalAlerts.length+1））；
}
}
})

添加警报

@Jeff Vue可以注册推送到阵列，但无法注册更新阵列的现有索引。你说得对，我没有仔细阅读你的请求！谢谢。这是一个好的开始。它可以运行。有一些额外的功能。但我想我可以解决这个问题。

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