mota

Mota 是一个面向 React 的状态管理库(http://houfeng.net/mota)

Usage no npm install needed!

<script type="module">
  import mota from 'https://cdn.skypack.dev/mota';
</script>

README

logo

npm NPM Version Build Status Coverage Status npm

Overview

Mota 是一个面向 React 应用的状态管理库,希望用纯粹的、普通的 JavaScript 为应用编写不强依赖于框架的「业务模型」,然后,仅由 Mota 将「业务模型」关联到 React 应用。

此外,Mota 同时支持 Class 和 Hook 的两种编程风格。

Install

通过 npm 安装,如下

$ npm i mota --save

API

model

DemoModel.js

export class DemoModel {
  count = 0;
  add = ()=>{
    this.count += 1;
  }
}

Demol.js

import { model } from "mota";
import { DemoModel } from "./DemoModel"

@model(DemoModel)
export class Demo extends Component{
  render() {
    const {count, add} = this.model
    return <div>
      {count} <button onClick={add}>Add</button>
    </div>
  }
}

useModel

DemoModel.js

export const state = {
  count: 0,
}

export function add(){
  state.count += 1;
}

Demo.js

import { useModel } from "mota";
import { state, add } from "./DemoModel";

export function Demo{
  const { count } = useModel(state);
  return <div>
    {count} <button onClick={add}>Add</button>
  </div>
}

binding

For class

export class DemoModel {
  message = "hello";
  print = ()=> {
    console.log(this.message);
  }
}

@model(DemoModel)
@binding
export class Demo extends Component{
  render() {
    const { print } = this.model
    return <div>
      <input data-bind="message"/>
      <button onClick={print}>Print</button>
    </div>
  }
}

For hook

export const state = {
  message = "hello";
}

export function print(){
 console.log(state.message);
}

export function Demo(){
  const model = useModel(state);
  return binding(<div>
    <input data-bind="message"/>
    <button onClick={print}>Print</button>
  </div>, model);
}

Examples

在线 TodoList 示例 (示例源码)

Docs

Links