Omi Store 體系

2018-05-10 11:48 更新

Store

import { render, Component } from 'omi';

class Hello extends Component {
  render() {
    return <div>{this.props.name}</div>
  }
}

class App extends Component {
  constructor() {
    super()
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    this.$store.rename('Hello Omi !')
  }

  render() {
    return (
      <div>
        <Hello name={this.$store.name}></Hello>
        <button onclick={this.handleClick}>Click me to call this.$store.rename('Hello Omi !') </button>
      </div>
    )
  }
}

class AppStore {
  constructor(data, callbacks) {
    this.name = data.name || ''
    this.onRename = callbacks.onRename || function () { }
  }

  rename(name) {
    this.name = name
    this.onRename()
  }
}

const app = new App()
const appStore = new AppStore({ name: 'Omi' }, {
  onRename: () => {
    app.update()
  }
})

render(app, document.body, appStore)

通過(guò)根節(jié)點(diǎn)注入后,你可以在所有組件中使用 this.$store 來(lái)獲取 store 的數(shù)據(jù)或者調(diào)用 store 的方法。


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)