introducing vue-events as an event bus

vueJs/package-lock.json

@@ -21314,6 +21314,12 @@
         }
       }
     },
+    "vue-events": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npm.taobao.org/vue-events/download/vue-events-3.1.0.tgz",
+      "integrity": "sha1-jiMSHDRbT/Mu4FT5eVmV8+NEsn0=",
+      "dev": true
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.4.tgz",

vueJs/package.json

@@ -117,6 +117,7 @@
     "typescript": "^3.8.3",
     "vue-cli-plugin-element": "^1.0.1",
     "vue-cli-plugin-style-resources-loader": "^0.1.4",
+    "vue-events": "^3.1.0",
     "vue-template-compiler": "^2.6.11",
     "vue-virtual-scroll-list": "^2.1.8",
     "webpack": "^4.42.1"

vueJs/src/components/Notification/components/UserNofitications.vue

@@ -113,7 +113,7 @@ export default class extends Vue {
             notification.datetime = notify.creationTime
             notification.severity = notify.notificationSeverity
             this.notifications.push(notification)
-            this.$emit('notificationReceived')
+            this.$events.emit('onNotificationReceived', notify)
           })
         })
       })
@@ -129,16 +129,14 @@ export default class extends Vue {
 
   private onNotificationReceived(notify: any) {
     console.log('received signalr message...')
-    console.log(notify)
     const notification = new Notification()
     notification.id = notify.id
     notification.title = notify.data.properties.title
     notification.message = notify.data.properties.message
     notification.datetime = notify.creationTime
     notification.severity = notify.notificationSeverity
-    console.log(notification)
     this.pushUserNotification(notification)
-    this.$emit('notificationReceived')
+    this.$events.emit('onNotificationReceived', notify)
     this.$notify({
       title: notification.title,
       message: notification.message,
@@ -150,12 +148,11 @@ export default class extends Vue {
     this.connection.invoke('ChangeState', notificationId, ReadState.Read).then(() => {
       const removeNotifyIndex = this.notifications.findIndex(n => n.id === notificationId)
       this.notifications.splice(removeNotifyIndex, 1)
-      this.$emit('notificationReadChanged')
+      this.$events.emit('onNotificationReadChanged')
     })
   }
 
   private pushUserNotification(notification: any) {
-    console.log(this.notifications)
     if (this.notifications.length === 20) {
       this.notifications.shift()
     }

vueJs/src/components/Notification/index.vue

@@ -21,10 +21,7 @@
           <el-tab-pane
             label="通知"
           >
-            <user-nofitications
-              @notificationReceived="notificationCount+=1"
-              @notificationReadChanged="notificationCount-=1"
-            />
+            <user-nofitications />
           </el-tab-pane>
           <el-tab-pane label="消息">
             {{ $t('messages.noMessages') }}
@@ -47,6 +44,15 @@ import UserNofitications from './components/UserNofitications.vue'
 })
 export default class extends Vue {
   private notificationCount = 0
+
+  created() {
+    this.$events.on('onNotificationReceived', () => {
+      this.notificationCount += 1
+    })
+    this.$events.on('onNotificationReadChanged', () => {
+      this.notificationCount -= 1
+    })
+  }
 }
 </script>
 

vueJs/src/main.ts

@@ -7,6 +7,7 @@ import SvgIcon from 'vue-svgicon'
 
 import uploader from 'vue-simple-uploader'
 import contextMenu from 'vue-contextmenujs'
+import VueEvents from 'vue-events'
 
 import '@/styles/element-variables.scss'
 import 'view-design/dist/styles/iview.css'
@@ -42,6 +43,7 @@ Vue.use(SvgIcon, {
 
 Vue.use(uploader)
 Vue.use(contextMenu)
+Vue.use(VueEvents)
 
 // Register global directives
 Object.keys(directives).forEach(key => {