import { provider } from 'we-mobx'
import stores from './store/index'

const App = provider(stores)

App<IAppOption>({
  ...
})

import { observer } from 'we-mobx'

const observe = observer.page({
  ...
})

observe({ storeA, storeB })

import { inject } from 'we-mobx'

inject<Stores>('storeA', 'storeB')(({ storeA }) =>
  observer.page({
    ...
  })
)

import { observable, computed, action } from 'mobx'

class Todo {
  id = Math.random()

  @observable title = ''
  @observable completed = false

  constructor(title: string) {
    this.title = title
  }
}

class TodoStore {
  @observable todos: Todo[] = []

  @action
  add(title: string) {
    this.todos.push(new Todo(title))
  }

  @action
  remove(id: number) {
    this.todos.splice(
      this.todos.findIndex(todo => todo.id === id),
      1
    )
  }

  @action
  toggle(id: number) {
    const todo = this.todos.find(item => item.id === id)

    if (todo) {
      todo.completed = !todo.completed
    }
  }
}

export default new TodoStore()

import { provider } from 'we-mobx'
import { todoStore } from './store/index'

const App = provider({ todoStore })

App<IAppOption>({
  ...
})

import { inject } from 'we-mobx'

inject<Stores>('todoStore')(({ todoStore }) =>
  observer.page({
    count: 0,

    addTodo() {
      todoStore.add('My Todo ' + ++this.count)
    },

    removeTodo(e: any) {
      const { id } = e.currentTarget.dataset
      todoStore.remove(id)
    },

    toggleCompleted(e: any) {
      const { id } = e.currentTarget.dataset
      todoStore.toggle(id)
    },
  })
)

import { observer } from 'we-mobx'
import { todoStore } from '../../store/index'

const observe = observer.page({
  count: 0,

  addTodo() {
    todoStore.add('My Todo ' + ++this.count)
  },

  removeTodo(e: any) {
    const { id } = e.currentTarget.dataset
    todoStore.remove(id)
  },

  toggleCompleted(e: any) {
    const { id } = e.currentTarget.dataset
    todoStore.toggle(id)
  },
})

observe({ todoStore })