Appearance

Bus Plugin ​

File Information ​

  • Path: plugins/bus.js
  • Purpose: Vue instance-based event bus for component communication

Overview ​

The Bus plugin creates a global Vue instance that can be used as an event bus for communication between components. It's available as $bus on all Vue instances and provides a simple pub/sub pattern for component communication.

Key Features ​

  1. Event Bus

    • Global Vue instance
    • Event emission
    • Event listening
    • Component communication

  2. Simple API

    • $emit - Emit events
    • $on - Listen to events
    • $off - Remove listeners
    • $once - Listen once

Installation ​

The plugin automatically installs itself:

  • Creates Vue instance
  • Attaches to Vue.prototype.$bus
  • Available globally

Usage Examples ​

Emit Event ​

javascript
// In component
this.$bus.$emit('asset-uploaded', assetData)
this.$bus.$emit('folder-created', folderData)

Listen to Event ​

javascript
// In component
export default {
  mounted() {
    this.$bus.$on('asset-uploaded', this.handleAssetUploaded)
  },
  beforeDestroy() {
    this.$bus.$off('asset-uploaded', this.handleAssetUploaded)
  },
  methods: {
    handleAssetUploaded(assetData) {
      // Handle event
      console.log('Asset uploaded:', assetData)
    }
  }
}

Listen Once ​

javascript
// In component
this.$bus.$once('workspace-switched', (workspace) => {
  // Handle only first occurrence
  this.loadWorkspaceData(workspace)
})

Remove Listener ​

javascript
// In component
this.$bus.$off('event-name', handler)
// Or remove all listeners for event
this.$bus.$off('event-name')

Common Events ​

Common events used in the application:

  • asset-uploaded - Asset upload completed
  • folder-created - Folder created
  • workspace-switched - Workspace changed
  • filter-applied - Filter applied
  • search-executed - Search performed

Best Practices ​

  1. Cleanup: Always remove listeners in beforeDestroy
  2. Naming: Use descriptive event names
  3. Data: Pass minimal data in events
  4. Documentation: Document custom events

Integration Points ​

  • Components: Inter-component communication
  • Pages: Cross-page communication
  • Store: Event-driven updates

Notes for Development ​

  • Plugin creates global event bus
  • Available as $bus on all components
  • Remember to cleanup listeners
  • Use for loose coupling between components
  • Alternative to props/events for distant components