Sistema de Eventos

O sistema de eventos implementa o modelo publisher / subscriber. Ele pode ser usado para passar dados entre páginas, por exemplo.

e.g.

Em event-bus.js

import { EventSystem } from 'mamba-websdk'

export const EventBus = new EventSystem()

Em page1.js

import { EventBus } from '../shared/event-bus.js'

export default {
  props: {
    myProp: '123'
  },
  onCreate() {
    EventBus.on('action', this.runOnAction, this)
  },
  methods: {
    runOnAction (arg1, arg2) {
      console.log(arg1)
      console.log(arg2)
      console.log(this.myProp)
    }
  }
}

Em page2.js

import { EventBus } from '../shared/event-bus.js'

export default {
  onUpdate() {
    EventBus.emit('action', 'abc', 123)
  }
}

Apesar de ser possível passar dados entre os componentes desta maneira, existem alguns problemas. Note que o componente só irá se inscrever no sistema de eventos se ele já tiver sido criado; desta forma, a ordem que os componentes são criados afetam o comportamento do sistema. Além disso, não é possível saber o estado do sistema a qualquer momento.

Recomendamos criar uma Store simples, que incorpora o sistema de eventos mas mantém o estado do sistema.

Template da estrutura

Em shared/todo.ts

class Todo {
  public message: string = ''
  public creationDate: Date

  constructor(message: string) {
    this.message = message
    this.creationDate = new Date()
  }
}

class TodoSystem {
  private todos: Array<string> = []

  add (todo: string) {
    todos.push(new Todo(todo))
  }

  update (oldTodo: string, newTodo: string) {
    this.todos
      .filter(todo => todo.message === oldTodo)
      .forEach(todo => todo.message = newTodo)
  }

  deleteTodo (todo: string) {
    this.todos = this.todos.filter(_todo => _todo.message !== todo)
  }

  getTodos (): Array<string> {
    return this.todos.map(todo => todo.message)
  }
}

export TodoSystem

Em shared/todo-actions.ts

enum TodoActions {
  ADD,
  UPDATE,
  DELETE
}

export default TodoActions

Em shared/todo-store.ts

import { EventSystem } from 'mamba-websdk'
import TodoActions from './todo-actions'
import TodoSystem from './todo-system'

class TodoStore extends EventSystem {
  private todos: TodoSystem = new TodoSystem()

  add (todo: string) {
    todos.add(todo)
    super.emit(TodoActions.ADD, todo)
  }

  update (oldTodo: string, newTodo: string) {
    todos.update(oldTodo, newTodo)
    super.emit(TodoActions.UPDATE, oldTodo, newTodo)
  }

  deleteTodo (todo: string) {
    todos.deleteTodo(todo)
    super.emit(TodoActions.DELETE, todo)
  }

  getTodos () {
    return todos.getTodos()
  }
}

export const TodoStore = new TodoStore()

Desta forma é possível saber o estado do sistema a qualquer momento, além de poder se inscrever em eventos.

e.g.

import TodoStore from '../../shared/todo-store'
import TodoActions from '../../shared/todo-actions'

TodoStore.on(TodoActions.ADD, (todo) => console.log(`added todo: ${todo}`))
TodoStore.on(TodoActions.UPDATE, (old, new) => console.log(`updated todo from '${old}' to '${new}'`))
TodoStore.on(TodoActions.DELETE, (todo) => console.log(`deleted todo: ${todo}`))

TodoStore.add('First todo')
TodoStore.add('Second todo')
TodoStore.add('Do it now')
TodoStore.update('Do it now', 'Do it later')
TodoStore.delete('Do it later')
TodoStore.getTodos().forEach(todo => console.log(todo))

// Saída:
// added todo: First todo
// added todo: Second todo
// added todo: Do it now
// updated todo from 'Do it now' to 'Do it later'
// deleted todo: Do it later
// First todo
// Second todo

on (eventName: string, callback: EventCallback, thisArg: Object = null): void

Cadastra uma callback no sistema de eventos. A callback receberá como parâmetros tudo o que for passado pelo método emit

Parâmetro	Tipo	Descrição
eventName	string	Nome do evento para cadastro
callback	function	Função de callback que será chamada quando o evento for emitido
thisArg	Object?	Contexto aplicado à callback

e.g.

import { EventSystem } from 'mamba-websdk'

const EventBus = new EventSystem()

EventBus.on('my-event', (arg1, arg2) => console.log(arg1, arg2))

EventBut.emit('my-event')
EventBut.emit('my-event', '123', abc)

// Saída:
// undefined undefined
// 123 abc

off (eventName: string, callback: EventCallback): void

Remove uma callback cadastrada do sistema de eventos para o evento desejado

Parâmetro	Tipo	Descrição
eventName	string	Nome do evento para cadastro
callback	function	Função de callback que será chamada quando o evento for emitido

import { EventSystem } from 'mamba-websdk'

const EventBus = new EventSystem()

function logFirstArg (arg) {
  console.log(arg)
}

EventBus.on('my-event', logFirstArg)
EventBut.emit('my-event', 123)

EventBus.off('my-event', logFirstArg)
EventBut.emit('my-event', 456)

// Saída:
// 123

emit (eventName: string, …args: any[]): void

Emite um evento. O primeiro argumento é o nome do evento; todos os outros argumentos serão passados para as callbacks cadastradas para o evento

Parâmetro	Tipo	Descrição
eventName	string	Nome do evento para cadastro
…args	any	Argumentos passados para as callbacks