perf: 使用Vuex代替事件总线

src/assets/js/bus.js

@@ -1,3 +1,18 @@
 // import Vue from 'vue';
 
-export default new Vue();
+export const EventBus = new Vue();
+
+export default {
+  on(event, callback) {
+    EventBus.$on(event, callback);
+  },
+  off(event, callback) {
+    EventBus.$off(event, callback);
+  },
+  emit(event, ...args) {
+    EventBus.$emit(event, ...args);
+  },
+  notify(any) {
+    EventBus.$notify(any)
+  }
+};

src/components/FancyTree/index.vue

@@ -39,7 +39,7 @@
   import 'jquery.fancytree/dist/skin-win8/ui.fancytree.less';
   import 'jquery.fancytree/dist/modules/jquery.fancytree.edit';
   import fancytree from 'jquery.fancytree';
-  import Bus from '@/assets/js/bus'
+  import store from '@/store'
 
   import api from '@/api/file-api'
   export default {
@@ -431,20 +431,22 @@
           username: this.$store.state.user.name,
           path: encodeURI(node.data.path)
         }).then(res => {
-          if (res.data) {
+          row.oldName = node.data.name
-            row.oldName = node.data.name
+          row.name = newFileName
-            row.name = newFileName
+          row.suffix = newFileName.replace(/.+\./,"")
-            row.suffix = newFileName.replace(/.+\./,"")
+          console.log('renameRow',row)
-            Bus.$emit('renameRow',row)
+          store.dispatch('updateMessage', {
-            row.oldPath = row.path
+            event: 'renameRow',
-            row.path = row.path.substring(0,row.path.length - row.oldName.length) + newFileName
+            data: row
-            node.setTitle(newFileName)
+          })
-            this.addRef(node)
+          row.oldPath = row.path
-            this.$message.success("修改成功！")
+          row.path = row.path.substring(0,row.path.length - row.oldName.length) + newFileName
-            this.$emit('onRename', row)
+          node.setTitle(newFileName)
-            if(this.editableTabsValue === row.oldPath){
+          this.addRef(node)
-              this.$emit('update:editableTabsValue', row.path)
+          this.$message.success("修改成功！")
-            }
+          this.$emit('onRename', row)
+          if(this.editableTabsValue === row.oldPath){
+            this.$emit('update:editableTabsValue', row.path)
           }
         })
       },

src/components/Minder/minder.vue

@@ -110,9 +110,9 @@ import 'vue-kityminder-ggg/examples/styles/minder.css';
 import JSPDF from 'jspdf';
 import api from "@/api/file-api";
 import txtApi from "@/api/markdown-api";
-import Bus from "@/assets/js/bus";
 import historyApi from "@/api/file-history";
 import HistoryPopover from "@/components/HistoryPopover/index.vue";
+import {mapState} from "vuex";
 
 
 export default {
@@ -139,6 +139,7 @@ export default {
     },
   },
   computed: {
+    ...mapState(['message']),
     hasReadOnly() {
       return this.readOnly || this.viewHistory
     },
@@ -207,14 +208,17 @@ export default {
     },
     zoom(val) {
       this.execCommand('Zoom', val)
+    },
+    message(msg) {
+      if (msg.event === 'previewSaveAndClose') {
+        this.saveAndClose()
+      }
     }
   },
   mounted() {
-    Bus.$on('previewSaveAndClose', this.saveAndClose)
     document.addEventListener('keydown', this.ctrlAndS)
   },
   destroyed() {
-    Bus.$off('previewSaveAndClose')
     document.removeEventListener('keydown', this.ctrlAndS)
   },
   methods: {

src/components/ShowFile/ShowFile.vue

@@ -847,7 +847,7 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
+import { mapGetters, mapState } from "vuex";
 import { formatSize, formatTime } from "@/utils/number";
 import { getElementToPageLeft } from "@/utils/dom";
 import { suffix } from "@/utils/file-type";
@@ -1159,6 +1159,7 @@ export default {
     };
   },
   computed: {
+    ...mapState(["message"]),
     ...mapGetters(["name"]),
     gridFilename() {
       // 优化文件名，如果文件名过长，则进行截取
@@ -1236,28 +1237,39 @@ export default {
         this.queryCondition.tagId = this.$route.query.tagId;
         this.getFileList();
       }
+    },
+    message(msg) {
+      console.log('msg.event', msg.event, msg)
+      switch (msg.event) {
+          case 'msg/file/operation/fault':
+            this.getFileList();
+            break;
+          case 'fileSuccess':
+            this.setOnCreateFilename(msg.data)
+            break;
+          case 'loadFileFailed':
+            this.notPreviewDialogVisible = true;
+            break;
+          case 'clickMore':
+            this.$refs.fileListTable.tableSelectData = msg.data;
+            this.preliminaryRowData();
+            break;
+          case 'renameRow':
+            let index = this.fileList.findIndex(file => file.name === msg.data.oldName);
+            if (index > -1) {
+              let newRow = this.fileList[index];
+              newRow.suffix = msg.data.suffix;
+              newRow.name = msg.data.name;
+              this.$refs.fileListTable.clearSelection();
+            }
+            break;
+          case 'msg/file/change':
+            this.onmessage(msg.data)
+            break;
+      }
     }
   },
   mounted() {
-    Bus.$on("fileSuccess", (filename) => {
-      this.setOnCreateFilename(filename)
-    });
-    Bus.$on("loadFileFailed", () => {
-      this.notPreviewDialogVisible = true;
-    });
-    Bus.$on("clickMore", rows => {
-      this.$refs.fileListTable.tableSelectData = rows;
-      this.preliminaryRowData();
-    });
-    Bus.$on("renameRow", row => {
-      let index = this.fileList.findIndex(file => file.name === row.oldName);
-      if (index > -1) {
-        let newRow = this.fileList[index];
-        newRow.suffix = row.suffix;
-        newRow.name = row.name;
-        this.$refs.fileListTable.clearSelection();
-      }
-    });
     // 监听返回
     if (window.history && window.history.pushState) {
       history.pushState(null, null, document.URL);
@@ -1315,24 +1327,12 @@ export default {
         document.documentElement.clientHeight - that.lessClientHeight;
     };
 
-    Bus.$on("msg/file/change", msg => this.onmessage(msg));
-
-    Bus.$on("msg/file/operation/fault", msg => this.onmessageFault(msg));
-
     setTimeout(() => {
       if (!this.getFileListed) {
         this.getFileList();
       }
     }, 50);
   },
-  destroyed() {
-    Bus.$off("fileSuccess");
-    Bus.$off("loadFileFailed");
-    Bus.$off("clickMore");
-    Bus.$off("renameRow");
-    Bus.$off("msg/file/change");
-    Bus.$off("msg/file/operation/fault");
-  },
   beforeDestroy() {
     window.removeEventListener("keydown", this.keydown, false);
     window.removeEventListener("keyup", this.keyup, false);
@@ -1429,11 +1429,6 @@ export default {
         this.selectPin = false;
       }
     },
-    onmessageFault(msg) {
-      if ("fault" === msg) {
-        this.getFileList();
-      }
-    },
     onmessage(msg) {
       let fileDoc = msg.body
       const url = msg.url;
@@ -1933,7 +1928,7 @@ export default {
       };
 
       container.ondragend = function(e) {
-        Bus.$emit("onDragStart", false);
+        _this.$store.dispatch('updateMessage', { event: 'onDragStart', data: false})
         e.dataTransfer.effectAllowed = "none";
         // console.log('child'+dragIndex+'拖拽结束');
         // 清除上次进入的容器的状态
@@ -2021,7 +2016,7 @@ export default {
         firstOver = 0;
         let dragImage = document.getElementById("dragImage");
         e.dataTransfer.setDragImage(dragImage, 10, 10);
-        Bus.$emit("onDragStart", true);
+        _this.$store.dispatch('updateMessage', { event: 'onDragStart', data: true})
         // 避免和画矩形选区冲突
         _this.drawFlag = false;
         let rectangle = document.getElementById("rectangle1");
@@ -2235,24 +2230,23 @@ export default {
     },
     upload() {
       // 打开文件选择框
-      Bus.$emit("openUploader", {
+      this.$store.dispatch('updateMessage', { event: 'openUploader', data: {
-        // 传入的参数
-        folder: this.$route.query.folder,
-        currentDirectory: this.getQueryPath(),
-        username: this.$store.state.user.name,
-        userId: this.$store.state.user.userId
-      });
-    },
-    uploadFolder() {
-      if (window.uploader.supportDirectory) {
-        // 打开文件夹选择框
-        Bus.$emit("uploadFolder", {
           // 传入的参数
           folder: this.$route.query.folder,
           currentDirectory: this.getQueryPath(),
           username: this.$store.state.user.name,
           userId: this.$store.state.user.userId
-        });
+        }})
+    },
+    uploadFolder() {
+      if (window.uploader.supportDirectory) {
+        this.$store.dispatch('updateMessage', { event: 'uploadFolder', data: {
+            // 传入的参数
+            folder: this.$route.query.folder,
+            currentDirectory: this.getQueryPath(),
+            username: this.$store.state.user.name,
+            userId: this.$store.state.user.userId
+          }})
       } else {
         this.$message({
           message: "该浏览器不支持上传文件夹",
@@ -2656,7 +2650,7 @@ export default {
           storageType = 'File'
         }
       }
-      Bus.$emit('storageTypeChange', storageType)
+      this.$store.dispatch('updateMessage', {event: 'storageTypeChange', data: storageType})
     },
     // 设置挂载文件的用户名(文件的所有者)
     setMountFileOwner() {
@@ -4094,7 +4088,7 @@ export default {
         }
         if (row.contentType.indexOf("audio") > -1) {
           // 音频文件
-          Bus.$emit("onAddAudio", row, this.audioCoverUrl);
+          this.$store.dispatch('updateMessage', { event: 'onAddAudio', data: { row: row, audioCoverUrl: this.audioCoverUrl } })
           return;
         }
         if (suffix.compressedFile.includes(row.suffix)) {

src/components/SimpleUploader/globalUploader.vue

@@ -111,19 +111,14 @@
 </template>
 
 <script>
-/**
- *   全局上传插件
- *   调用方法：Bus.$emit('openUploader', {}) 打开文件选择框，参数为需要传递的额外参数
- *   监听函数：Bus.$on('fileAdded', fn); 文件选择后的回调
- *            Bus.$on('fileSuccess', fn); 文件上传成功的回调
- */
 
 // import { ACCEPT_CONFIG } from '@/assets/js/config'
-import Bus from '@/assets/js/bus'
+import store from '@/store'
 import $ from 'jquery'
 import SparkMD5 from 'spark-md5'
 import api from '@/api/file-api'
 import {formatNetSpeed} from '@/utils/number'
+import {mapState} from 'vuex'
 
 export default {
   components: {},
@@ -198,10 +193,43 @@ export default {
       uploader: null,
     }
   },
+  computed: {
+    ...mapState(['message'])
+  },
   watch: {
     $route(route) {
       // 只有首页才启用拖拽上传
       this.enableDragUplaod = route.path === '/'
+    },
+    message(msg) {
+      switch (msg.event) {
+        case 'storageTypeChange':
+          this.onStorageTypeChange(msg.data)
+          break
+        case 'fileListScrollTop':
+          this.fileListScrollTop = msg.data
+          break
+        case 'onDragStart':
+          this.isDragStart = msg.data
+          break
+        case 'uploadFileListBack':
+          if (this.process !== -10 && this.process !== 100 && this.fileListLength !== 0) {
+            this.shrink()
+          }
+          break
+        case 'openUploader':
+          this.params = msg.data || {}
+          if (this.$refs.uploadBtn) {
+            $('#global-uploader-btn').click()
+          }
+          break
+        case 'uploadFolder':
+          this.params = msg.data || {}
+          if (this.$refs.folderBtn) {
+            $('#folder-uploader-btn').click()
+          }
+          break
+      }
     }
   },
   mounted() {
@@ -247,8 +275,12 @@ export default {
       e.preventDefault();
       that.dragover = false
     }, false);
-
+    this.initUploader()
-    Bus.$on('storageTypeChange', storageType => {
+  },
+  destroyed() {
+  },
+  methods: {
+    onStorageTypeChange(storageType) {
       if (storageType === 'File') {
         if (this.options.chunkSize === 1024 * 1024) {
           return
@@ -260,45 +292,7 @@ export default {
         }
         this.updateChunkSize(5 * 1024 * 1024)
       }
-    })
+    },
-
-    Bus.$on('fileListScrollTop', fileListScrollTop => {
-      this.fileListScrollTop = fileListScrollTop
-    })
-
-    Bus.$on('onDragStart', isDragStart => {
-      this.isDragStart = isDragStart
-    })
-
-    Bus.$on('openUploader', query => {
-      this.params = query || {}
-      if (this.$refs.uploadBtn) {
-        $('#global-uploader-btn').click()
-      }
-    })
-    Bus.$on('uploadFolder', query => {
-      this.params = query || {}
-      if (this.$refs.folderBtn) {
-        $('#folder-uploader-btn').click()
-      }
-    })
-
-    Bus.$on('uploadFileListBack', () => {
-      if (this.process !== -10 && this.process !== 100 && this.fileListLength !== 0) {
-        this.shrink()
-      }
-    })
-    this.initUploader()
-  },
-  destroyed() {
-    Bus.$off('openUploader')
-    Bus.$off('uploadFolder')
-    Bus.$off('uploadFileListBack')
-    Bus.$off('fileListScrollTop')
-    Bus.$off('onDragStart')
-    Bus.$off('storageTypeChange')
-  },
-  methods: {
     initUploader() {
       this.$nextTick(() => {
         this.uploader = this.$refs.uploader.uploader
@@ -367,7 +361,7 @@ export default {
             ...this.params
           }
         })
-        Bus.$emit('fileAdded')
+        store.dispatch('updateMessage', {event: 'fileAdded', data: null})
       })
     },
     onFileProgress(rootFile, file, chunk) {
@@ -427,7 +421,7 @@ export default {
         }).then(() => {
           // console.log('文件合并成功', res)
           // 文件合并成功
-          Bus.$emit('fileSuccess', file.name)
+          store.dispatch('updateMessage', {event: 'fileSuccess', data: file.name})
           this.statusRemove(file.id)
           this.statusSet(file.id, 'success')
           // file.removeFile(file)
@@ -436,7 +430,7 @@ export default {
         })
         // 不需要合并
       } else {
-        Bus.$emit('fileSuccess', file.name)
+        store.dispatch('updateMessage', {event: 'fileSuccess', data: file.name})
         // 完成后从文件列表移除
         // file.removeFile(file)
         // console.log('上传成功')

src/components/office/Drawio.vue

@@ -32,6 +32,7 @@ import txtApi from "@/api/markdown-api"
 import Bus from "@/assets/js/bus";
 import HistoryPopover from "@/components/HistoryPopover/index.vue";
 import historyApi from "@/api/file-history";
+import {mapState} from "vuex";
 
 export default {
   name: "Drawio",
@@ -74,6 +75,9 @@ export default {
       lightTheme: true
     }
   },
+  computed: {
+    ...mapState(['message'])
+  },
   created() {
     let language = 'zh'
     let lightbox = this.readOnly ? 1 : 0
@@ -84,14 +88,12 @@ export default {
     this.url = $J.apiUrl(`../drawio/webapp/${query}`)
   },
   mounted() {
-    Bus.$on('previewSaveAndClose', this.saveAndClose)
     window.addEventListener('message', this.handleMessage)
   },
   beforeDestroy() {
     window.removeEventListener('message', this.handleMessage)
   },
   destroyed() {
-    Bus.$off('previewSaveAndClose')
   },
   watch: {
     'file.id': {
@@ -132,6 +134,11 @@ export default {
       immediate: true,
       deep: true,
     },
+    message(msg) {
+      if (msg.event === 'previewSaveAndClose') {
+        this.saveAndClose()
+      }
+    }
   },
   methods: {
     async checkDrawioUrl() {
@@ -140,11 +147,11 @@ export default {
           this.drawioUrlValid = true
         } else {
           this.$emit('onClose')
-          Bus.$emit('loadFileFailed')
+          this.$store.dispatch('updateMessage', { event: 'loadFileFailed'})
         }
       }).catch(() => {
         this.$emit('onClose')
-        Bus.$emit('loadFileFailed')
+        this.$store.dispatch('updateMessage', { event: 'loadFileFailed'})
       })
     },
     viewHistoryFile({historyInfo, recovery}) {

src/components/office/OnlyOfficeEditor.vue

@@ -23,9 +23,9 @@
 
 import api from "@/api/file-api"
 import fileConfig from "@/utils/file-config";
-import Bus from "@/assets/js/bus";
 import SparkMD5 from 'spark-md5'
 import HistoryPopover from "@/components/HistoryPopover/index.vue";
+import {mapState} from "vuex";
 
 export default {
   name: "OnlyOfficeEditor",
@@ -82,6 +82,7 @@ export default {
     this.destroyEditor()
   },
   computed: {
+    ...mapState(['message']),
     fileType() {
       return this.getType(this.file.suffix)
     },
@@ -96,7 +97,7 @@ export default {
         $J.loadScript($J.apiUrl(officeApiUrl), (e) => {
           if (e !== null) {
             this.$emit('onClose')
-            Bus.$emit('loadFileFailed')
+            this.$store.dispatch('updateMessage', { event: 'loadFileFailed'})
             return
           }
           if(this.$store.state.user.token && this.$store.state.user.userId === this.file.userId){
@@ -123,15 +124,14 @@ export default {
           versionBtn.style.display = 'none'
         }
       }
+    },
+    message(msg) {
+      if (msg.event === 'previewSaveAndClose') {
+        this.requestClose()
+      }
     }
   },
-  mounted() {
-    Bus.$on('previewSaveAndClose', () => {
-      this.requestClose()
-    })
-  },
   destroyed() {
-    Bus.$off('previewSaveAndClose')
   },
   methods: {
     viewHistoryFile({historyInfo}) {
@@ -174,7 +174,6 @@ export default {
       }
     },
     recoverySuccess({result}) {
-      console.log('recoverySuccess', result)
       this.reloadDocument(`${result.data}-${SparkMD5.hash(this.file.id)}`)
       this.$message({message: '恢复成功',type: 'success'})
       this.historyListPopoverVisible = false

src/components/popover/MenuPopover.vue

@@ -43,7 +43,7 @@
 </template>
 
 <script>
-import Bus from '@/assets/js/bus'
+import store from '@/store'
 export default {
   name: 'MenuPopover',
   props: {
@@ -73,7 +73,10 @@ export default {
   methods: {
     showMenu(row, selects) {
       selects[0] = row
-      Bus.$emit('clickMore', selects)
+      store.dispatch('updateMessage', {
+        event: 'clickMore',
+        data: selects
+      })
     },
     test() {
     }

src/components/preview/AudioPreview.vue

@@ -27,16 +27,18 @@
 
 <script>
 import '@/utils/directives.js'
-import Bus from '@/assets/js/bus'
 import VueAPlayer from 'vue-aplayer'
 VueAPlayer.disableVersionBadge = true
 import fileConfig from '@/utils/file-config'
+import {mapState} from 'vuex'
 
 export default {
   name: 'AudioPreview',
   components: {VueAPlayer},
   props: {},
-  computed: {},
+  computed: {
+    ...mapState(['message'])
+  },
   data() {
     return {
       pc: this.$pc,
@@ -51,33 +53,37 @@ export default {
       shuffle: false
     }
   },
-  mounted() {
+  watch: {
-    Bus.$on('onAddAudio', (newFile, audioCoverUrl) => {
+    message(msg) {
-      if (!this.show) {
+      if (msg.event === 'onAddAudio') {
-        this.show = true
+        const newFile = msg.data.row
+        const audioCoverUrl = msg.data.audioCoverUrl
+        if (!this.show) {
+          this.show = true
+        }
+        this.$nextTick(() => {
+          let url = fileConfig.previewUrl(this.$store.state.user.name, newFile, this.$store.getters.token)
+          if (this.$store.getters.token === undefined) {
+            url = fileConfig.publicPreviewUrl(newFile, window.shareId, this.$store.getters.shareToken);
+          }
+          let music = newFile.music
+          let fileName = newFile.name.substring(0, newFile.name.length - newFile.suffix.length - 1)
+          this.currentMusic = {
+            id: newFile.id,
+            src: url,
+            title: music ? music.songName || fileName : fileName,
+            artist: music ? music.singer || fileName : fileName,
+            pic: music ? audioCoverUrl + newFile.id : '',
+            theme: 'pic'
+          }
+          let musicIndex = this.list.findIndex(item => item.id === newFile.id)
+          if (musicIndex < 0) {
+            this.list.push(this.currentMusic)
+          }
+          this.$refs.audioPlayer.thenPlay()
+        })
       }
-      this.$nextTick(() => {
+    }
-        let url = fileConfig.previewUrl(this.$store.state.user.name, newFile, this.$store.getters.token)
-        if (this.$store.getters.token === undefined) {
-          url = fileConfig.publicPreviewUrl(newFile, window.shareId, this.$store.getters.shareToken);
-        }
-        let music = newFile.music
-        let fileName = newFile.name.substring(0, newFile.name.length - newFile.suffix.length - 1)
-        this.currentMusic = {
-          id: newFile.id,
-          src: url,
-          title: music ? music.songName || fileName : fileName,
-          artist: music ? music.singer || fileName : fileName,
-          pic: music ? audioCoverUrl + newFile.id : '',
-          theme: 'pic'
-        }
-        let musicIndex = this.list.findIndex(item => item.id === newFile.id)
-        if (musicIndex < 0) {
-          this.list.push(this.currentMusic)
-        }
-        this.$refs.audioPlayer.thenPlay()
-      })
-    })
   },
   methods: {
     close() {
@@ -90,9 +96,6 @@ export default {
         that.closeBarShow = false
       }, 2500)
     }
-  },
-  destroyed() {
-    Bus.$off('onAddAudio')
   }
 }
 </script>

src/components/preview/ImageViewer.vue

@@ -18,7 +18,7 @@
 </template>
 <script>
 import fileConfig from '@/utils/file-config'
-import Bus from '@/assets/js/bus'
+import {mapState} from 'vuex'
 
 export default {
   name: "ImageViewer",
@@ -47,7 +47,9 @@ export default {
       }
     }
   },
-  computed: {},
+  computed: {
+    ...mapState(['message'])
+  },
   data() {
     return {
       imageThumbnailUrl: `${process.env.VUE_APP_BASE_API}/view/thumbnail`,
@@ -72,7 +74,7 @@ export default {
         hide: function (e) {
         },
         hidden: function () {
-          Bus.$emit('updateImageViewerStatus', false)
+          this.$store.dispatch('updateMessage', { event: 'updateImageViewerStatus' })
         },
         view: function (e) {
         },
@@ -103,18 +105,15 @@ export default {
         })
         this.show(viewIndex)
       }
+    },
+    message(msg) {
+      if (msg.event === 'updateImageViewerStatus') {
+        this.imagesFristIndex = -1
+        this.imagesLastIndex = -1
+        this.$emit('update:status', false)
+      }
     }
   },
-  mounted() {
-    Bus.$on('updateImageViewerStatus', () => {
-      this.imagesFristIndex = -1
-      this.imagesLastIndex = -1
-      this.$emit('update:status', false)
-    })
-  },
-  destroyed() {
-    Bus.$off("updateImageViewerStatus")
-  },
   methods: {
     inited(viewer) {
       this.$viewer = viewer
@@ -157,7 +156,7 @@ export default {
         images: imageUrls,
         startPosition: viewIndex,
         onClose() {
-          Bus.$emit('updateImageViewerStatus', false)
+          this.$store.dispatch('updateMessage', { event: 'updateImageViewerStatus'})
         }
       })
     }

src/components/preview/OfficePreview.vue

@@ -131,7 +131,7 @@ export default {
      */
     loadFileFailed() {
       this.close()
-      Bus.$emit('loadFileFailed')
+      this.$store.dispatch('updateMessage', { event: 'loadFileFailed'})
       this.readyShow = true
     },
     /**
@@ -197,7 +197,7 @@ export default {
      */
     saveAndClose() {
       // 通知插件保存
-      Bus.$emit('previewSaveAndClose')
+      this.$store.dispatch('updateMessage', { event: 'previewSaveAndClose'})
       this.isSaveDialogVisible = false
     },
     /**

src/layout/components/Sidebar/Logo.vue

@@ -25,6 +25,7 @@
 <script>
 import Bus from "@/assets/js/bus";
 import Logo from "@/components/Logo";
+import { mapState } from "vuex";
 
 export default {
   name: 'SidebarLogo',
@@ -36,6 +37,7 @@ export default {
     }
   },
   computed: {
+    ...mapState(['message']),
     title() {
       if (this.$store.state.user.netdiskName) {
         return this.$store.state.user.netdiskName
@@ -49,13 +51,14 @@ export default {
       return ''
     }
   },
-  mounted() {
+  watch: {
-    Bus.$on('updateLogo', () => {
+    message(msg) {
-      this.netdiskLogo = this.$store.state.user.netdiskLogo
+      if (msg.event === 'updateLogo') {
-    })
+        this.netdiskLogo = this.$store.state.user.netdiskLogo
+      }
+    }
   },
-  destroyed() {
+  mounted() {
-    Bus.$off('updateLogo')
   },
   data() {
     return {

src/layout/components/Sidebar/index.vue

@@ -88,8 +88,7 @@
 </template>
 
 <script>
-import Bus from '@/assets/js/bus'
+import { mapGetters, mapState } from 'vuex'
-import { mapGetters } from 'vuex'
 import Logo from './Logo'
 import SidebarItem from './SidebarItem'
 import variables from '@/styles/variables.scss'
@@ -119,6 +118,7 @@ export default {
     }
   },
   computed: {
+    ...mapState(['message']),
     ...mapGetters([
       'sidebar',
       'name',
@@ -167,14 +167,18 @@ export default {
     },
     $route(to) {
       this.showTag = to.meta !== undefined && to.meta.menuType !== undefined && to.meta.menuType === 0;
-    }
+    },
+    message(msg) {
+      if (msg.event === 'msg/file/change') {
+        this.onmessage(msg.data)
+        if (msg.data.url === 'updateTags') {
+          this.setTagListData(msg.data.body)
+        }
+      }
+    },
   },
   mounted() {
     this.getTagList()
-    Bus.$on('msg/file/change', (msg) => this.onmessage(msg))
-  },
-  destroyed() {
-    Bus.$off('msg/file/change')
   },
   methods: {
     getTagList() {
@@ -197,9 +201,6 @@ export default {
         const percentage = Number((space/this.userInfo.quota * 100).toFixed(1))
         this.percentage = percentage > 100 ? 100 : percentage
       }
-      if (msg.url === 'updateTags') {
-        this.setTagListData(msg.body)
-      }
     },
     copyWebDAVLink(className) {
       let clipboard = new Clipboard(className)

src/sse/SSEClient.js

@@ -1,4 +1,5 @@
 import Bus from "@/assets/js/bus";
+import store from "@/store";
 
 let eventSource = null;
 let timer = null;
@@ -33,13 +34,13 @@ export function connectToSSE(username) {
 function onMessage(msg) {
   const url = msg.url
   if (url === 'synced') {
-    Bus.$emit('msg/synced', msg)
+    store.dispatch('updateMessage', {event: 'msg/synced', data: msg})
   } else {
-    Bus.$emit('msg/file/change', msg)
+    store.dispatch('updateMessage', {event: 'msg/file/change', data: msg})
     if ('operationFile' === url) {
       let doc = msg.body
       if (doc.code === 0) {
-        Bus.$notify({
+        Bus.notify({
           title: `${doc.operation}成功`,
           dangerouslyUseHTMLString: true,
           message: `
@@ -54,8 +55,8 @@ function onMessage(msg) {
           type: 'success',
         });
       } else {
-        Bus.$emit('msg/file/operation/fault', 'fault')
+        store.dispatch('updateMessage', {event: 'msg/file/operation/fault', data: msg});
-        Bus.$notify({
+        Bus.notify({
           title: `${doc.operation}失败`,
           dangerouslyUseHTMLString: true,
           message: `<span style="font-size: 12px;">${doc.msg}</span>`,

src/store/index.js

@@ -11,9 +11,22 @@ const store = new Vuex.Store({
   modules: {
     app,
     settings,
-    user
+    user,
   },
-  getters
+  getters,
+  state: {
+    message: null,
+  },
+  mutations: {
+    setMessage(state, message) {
+      state.message = message;
+    },
+  },
+  actions: {
+    updateMessage({ commit }, message) {
+      commit('setMessage', message);
+    },
+  }
 })
 
 export default store

src/utils/file-config.js

@@ -27,7 +27,6 @@ export default {
     } else {
       owner = username
     }
-    console.log('owner', owner)
     let fileUrl = `${this.baseUrl}/file/${owner}${encodeURI(file.path)}${encodeURI(file.name)}`
     fileUrl = fileUrl.replace(/%5C/g, '/')
     if (token) {

src/views/home/mobile/index.vue

@@ -278,7 +278,6 @@ import {formatSize, formatTime} from '@/utils/number'
 import {getElementToPageLeft, getElementToPageTop} from '@/utils/dom'
 import api from '@/api/file-api'
 import IconFile from "../../../components/Icon/IconFile";
-import Bus from '@/assets/js/bus'
 import fileConfig from "@/utils/file-config";
 import ImageViewer from "@/components/preview/ImageViewer";
 import VideoPreview from "@/components/preview/VideoPreview";
@@ -1133,7 +1132,7 @@ export default {
           }
           if (row.contentType.indexOf('audio') > -1) {
             // 音频文件
-            Bus.$emit('onAddAudio', row, this.audioCoverUrl)
+            this.$store.dispatch('updateMessage', { event: 'onAddAudio', data: { row: row, audioCoverUrl: this.audioCoverUrl } })
             return
           }
           if (row.contentType.indexOf('office') > -1 || row.suffix === 'csv') {
@@ -1234,24 +1233,24 @@ export default {
       // 上传文件
       if (action.name === '上传文件') {
         // 打开文件选择框
-        Bus.$emit('openUploader', {
+        this.$store.dispatch('updateMessage', { event: 'openUploader', data: {
-          // 传入的参数
+            // 传入的参数
-          folder: this.$route.query.folder,
+            folder: this.$route.query.folder,
-          currentDirectory: encodeURI(this.path),
+            currentDirectory: encodeURI(this.path),
-          username: this.$store.state.user.name,
+            username: this.$store.state.user.name,
-          userId: this.$store.state.user.userId
+            userId: this.$store.state.user.userId
-        })
+          }})
       }
       // 上传文件夹
       if (action.name === '上传文件夹') {
         // 打开文件夹选择框
-        Bus.$emit('uploadFolder', {
+        this.$store.dispatch('updateMessage', { event: 'uploadFolder', data: {
-          // 传入的参数
+            // 传入的参数
-          folder: this.$route.query.folder,
+            folder: this.$route.query.folder,
-          currentDirectory: encodeURI(this.path),
+            currentDirectory: encodeURI(this.path),
-          username: this.$store.state.user.name,
+            username: this.$store.state.user.name,
-          userId: this.$store.state.user.userId
+            userId: this.$store.state.user.userId
-        })
+          }})
       }
     },
     // 新建文件夹

src/views/public/share/shareList.vue

@@ -275,9 +275,8 @@
 </template>
 
 <script>
-import {mapGetters} from 'vuex'
+import {mapGetters,mapState} from 'vuex'
 import {formatTime, formatSize} from '@/utils/number'
-import Bus from '@/assets/js/bus'
 import api from '@/api/file-api'
 import BreadcrumbFilePath from "@/components/Breadcrumb/BreadcrumbFilePath";
 import IconFile from "@/components/Icon/IconFile";
@@ -430,6 +429,7 @@ export default {
     }
   },
   computed: {
+    ...mapState(['message']),
     ...mapGetters([
       'name'
     ]),
@@ -450,41 +450,38 @@ export default {
         `${process.env.VUE_APP_BASE_API}/public/s/view/cover?name=${this.sharer.username}&share-token=${this.$store.getters.shareToken}&id=`
     }
   },
+  watch: {
+    message(msg) {
+      if (msg.event === 'fileSuccess') {
+        this.getFileList()
+      }
+      if (msg.event === 'clickMore') {
+        this.selectRowData = msg.data
+        this.preliminaryRowData()
+      }
+    }
+  },
   created() {
     this.getFileList()
     this.getSharer();
   },
   mounted() {
-    Bus.$on('fileSuccess', () => {
-      this.getFileList()
-    })
-    Bus.$on('clickMore', (selectRowData) => {
-      this.selectRowData = selectRowData
-      this.preliminaryRowData()
-    })
-
     if (window.history && window.history.pushState) {
       history.pushState(null, null, document.URL);
       window.addEventListener('popstate', this.goBack, false);
     }
-
-
     const that = this
     window.onresize = function temp() {
       that.loadClientHeight()
     }
-
     // 加载布局
     if (this.$route.query.vmode) {
       this.vmode = this.$route.query.vmode
       this.grid = this.vmode !== 'list';
     }
-
   },
   destroyed() {
     window.removeEventListener('popstate', this.goBack, false)
-    Bus.$off('fileSuccess')
-    Bus.$off('clickMore')
   },
   directives: {
     // 注册一个局部的自定义指令 v-focus
@@ -1096,7 +1093,7 @@ export default {
         }
         // 音频文件
         if (row.contentType.indexOf('audio') > -1) {
-          Bus.$emit('onAddAudio', row, this.audioCoverUrl)
+          this.$store.dispatch('updateMessage', { event: 'onAddAudio', data: { row: row, audioCoverUrl: this.audioCoverUrl } })
           return
         }
         // office文件

src/views/setting/cloudManager.vue

@@ -132,13 +132,13 @@
 
 import config from '@/../package.json'
 import settingApi, {getSetting} from "@/api/setting-api";
-import Bus from "@/assets/js/bus";
 import Logo from "@/components/Logo";
 import getPageTitle from "@/utils/get-page-title";
 import UploadImageInput from "@/components/input/UploadImageInput.vue";
 import roleApi from "@/api/role";
 import { loadLdapConfig, testLdapConfig, updateLdapConfig} from '@/api/user'
-import {mapGetters} from "vuex";
+import {mapGetters, mapState} from "vuex";
+import store from "@/store";
 
 export default {
   components: {UploadImageInput, Logo},
@@ -200,12 +200,6 @@ export default {
     this.getWebsiteSetting()
     this.getInfo()
     this.getIsSync()
-    Bus.$on('msg/synced', (msg) => {
-      this.syncPercent = msg.body
-      if (this.syncPercent >= 100) {
-        this.syncLoading = false
-      }
-    })
     if (this.$route.query.tab) {
       this.activeName = this.$route.query.tab
       if (this.activeName === '2') {
@@ -214,10 +208,8 @@ export default {
       }
     }
   },
-  destroyed() {
-    Bus.$off('msg/synced')
-  },
   computed: {
+    ...mapState(['message']),
     ...mapGetters([
       'newVersion'
     ]),
@@ -228,6 +220,16 @@ export default {
       return !(!this.ldapTestBtn && this.ldapFormData.defaultRoleList.length > 0 && this.ldapFormData.loginName.length > 0)
     }
   },
+  watch: {
+    message(msg) {
+      if (msg.url === 'synced') {
+        this.syncPercent = msg.body
+        if (this.syncPercent >= 100) {
+          this.syncLoading = false
+        }
+      }
+    }
+  },
   methods: {
     doTestLdapConfig() {
       this.testLdapConfigLoading = true
@@ -263,7 +265,7 @@ export default {
           netdiskName: this.netdiskName,
           netdiskLogo: this.logoFileName
         }).then(() => {
-          Bus.$emit('updateLogo')
+          store.dispatch('updateMessage', {event: 'updateLogo'})
         })
       } else {
         this.$message.error(res.message)
@@ -329,7 +331,7 @@ export default {
             netdiskName: this.netdiskName,
             netdiskLogo: this.logoFileName
           }).then(() => {
-            Bus.$emit('updateLogo')
+            store.dispatch('updateMessage', {event: 'updateLogo'})
             document.title = getPageTitle(this.$route.meta.title)
           })
           this.$message.success("网盘名称 修改成功")

src/views/upload/mobile/index.vue

@@ -26,9 +26,8 @@
 </template>
 <script>
 
-  import { strlen, substring10, formatTime, formatSize } from '@/utils/number'
   import IconFile from "../../../components/Icon/IconFile";
-  import Bus from '@/assets/js/bus'
+  import store from '@/store'
   export default {
     components: {IconFile},
     data() {
@@ -47,7 +46,10 @@
     methods: {
       onClickLeft() {
         this.$router.push(`/_m`)
-        Bus.$emit('uploadFileListBack', true)
+        store.dispatch('updateMessage', {
+          event: 'uploadFileListBack',
+          data: true
+        })
       }
     }
   }