Javascript 当vue中收到新通知时，如何在列表中添加通知？

在我的应用程序中，当我收到新通知时，我希望将其呈现为通知组件。现在的问题是，我并没有必要总是在屏幕上打开那个组件。也许我在另一个组件上，但当我想在打开该组件时看到通知时。我在main.js文件中收到实时通知

PushNotifications.addListener('pushNotificationReceived',
async (notification) => {
 //Notification 
}
);

此文件在全球范围内可用

此组件中有组件

通知

，我有通知列表，我想在此列表中呈现该通知。 这可能吗

下面是组件通知

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Notifications</ion-title>
        <ion-buttons slot="start">
          <ion-menu-button menuId="custom" auto-hide="false"></ion-menu-button>
        </ion-buttons>
        <ion-buttons slot="primary">
          <ion-button color="secondary" @click="handleSignOut">
            <ion-icon slot="icon-only" :icon="logOut"></ion-icon>
          </ion-button>
        </ion-buttons>
        <ion-buttons slot="primary"> </ion-buttons>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Notifications</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-title>{{ msg }}</ion-title>
      <ion-list v-if="this.notifications.length > 0">
        <ion-item
          v-for="(notification, index) in this.notifications"
          :key="index"
         >
          <ion-label @click="() => router.push(`${notification.data.actionURL}`)">
            
            {{ notification.data.actionText }}
          </ion-label>
        </ion-item>
      </ion-list>
     
     
      <ion-toolbar v-else>
        <ion-title size="large" align="center">No Notification</ion-title>
      </ion-toolbar>

    
      
    </ion-content>
    <side-menu />
  </ion-page>
</template>

<script>
import {
  IonPage,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonIcon,
  IonButtons,
  IonButton,
  IonList,
  IonItem,
  IonLabel,
} from "@ionic/vue";
import { logOut } from "ionicons/icons";

import { mapActions } from "vuex";
import { useRouter } from "vue-router";
import SideMenu from "./SideMenu.vue";
import { TokenService } from "@/services/token.service";
export default {
  name: "Tab1",
  components: {
    IonHeader,
    IonToolbar,
    IonTitle,
    IonContent,
    IonPage,
    IonIcon,
    IonButtons,
    IonButton,

    IonList,
    IonItem,
    IonLabel,
  },
  data() {
    return {
      msg: "",
      notifications: {},

    };
  },

  
   
  },
   mounted(){
       this.notifications= TokenService.getUserInfo().unread_notifications
    }
};
</script>

通知
通知
{{msg}}
{{notification.data.actionText}
不通知
进口{
伊恩佩奇，
IonHeader，
IonToolbar，
IonTitle，
爱雍容，
爱奥尼肯，
离子按钮，
IonButton，
IonList，
项目,，
IonLabel，
}来自“@IONAL/vue”；
从“ionicons/icons”导入{logOut}；
从“vuex”导入{mapActions}；
从“vue路由器”导入{useRouter}；
从“/SideMenu.vue”导入侧菜单；
从“@/services/token.service”导入{TokenService}；
导出默认值{
名称：“Tab1”，
组成部分：{
IonHeader，
IonToolbar，
IonTitle，
爱雍容，
伊恩佩奇，
爱奥尼肯，
离子按钮，
IonButton，
IonList，
项目,，
IonLabel，
},
数据（）{
返回{
味精：“，
通知：{}，
};
},
},
安装的（）{
this.notifications=TokenService.getUserInfo（）.未读通知
}
};

Vuex在这里可能是一个不错的选择，尤其是当应用程序增长并且您想要管理应用程序状态时。您能提供一些示例吗？如果您选择Vuex，那么我建议您只需深入阅读文档，其中解释了所有内容，并提供了代码示例：谢谢，这很有帮助