# angel-mobx

> 基于mobx封装的angel-mobx,使用起来更方便,减少配置

Latest version **0.0.5** (published 2018-11-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install angel-mobx
pnpm add angel-mobx
yarn add angel-mobx
bun add angel-mobx
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2018-11-20 |
| First published | 2018-11-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 7.9 KB |
| Known vulnerabilities | 0 (+24 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 2 |
| Author | ruanguangguang |
| Maintainers | ruanguangguang |
| Keywords | mobx, mobx-react, react, mobx-react, state, config, angel, angel-mobx, node, webpack, package |

## Links

- npm: https://www.npmjs.com/package/angel-mobx
- Repository: https://github.com/baiyuze/angel-mobx
- Homepage: https://github.com/baiyuze/angel-mobx#readme
- Issues: https://github.com/baiyuze/angel-mobx/issues
- npm.io page: https://npm.io/package/angel-mobx

## Dependencies (5)

- [mobx](https://npm.io/package/mobx.md) ^5.0.3
- [axios](https://npm.io/package/axios.md) ^0.18.0
- [react](https://npm.io/package/react.md) ^16.4.1
- [react-dom](https://npm.io/package/react-dom.md) ^16.4.1
- [mobx-react](https://npm.io/package/mobx-react.md) ^5.2.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.5 (latest) — 2018-11-20
- 0.0.4 — 2018-11-17
- 0.0.3 — 2018-11-17
- 0.0.2 — 2018-11-17
- 0.0.1 — 2018-11-17

## README

# 封装了mobx
```javascript
import React from 'react';
import { Route, Switch, HashRouter } from 'react-router-dom';
import TodoList from "./components/TodoList";
import app from 'angel-mobx';
function RouterConfig() {
  return (
    <HashRouter>
      <Switch>
        <Route path="/" exact component={TodoList} />
        <Route path="/test" exact component={TodoList} />
      </Switch>
    </HashRouter >
  );
}
//初始化
app.init({a: 1});
//创建model
app.createModel("TodoListModel", require('./models/TodoListModel').default);
//创建router
app.createRouter(RouterConfig);
//启动
app.start('root');

```

# 统一包处理

# 无论是从mobx中的包还是mobx-react中的包都可以直接在angel-mobx/package中进行引用

```javascript

import React, { Component } from "react";
// import { observable, action } from "mobx";
// import { observer, inject } from "mobx-react";
import { observer, inject, observable, action } from "angel-mobx/package";

import Todo from "./Todo";
@inject("store")
@observer
class TodoList extends React.Component {
  @observable newTodoTitle = "";

  render() {
    return (
      <div>
        <form onSubmit={this.handleFormSubmit}>
          New Todo:
          <input
            type="text"
            value={this.newTodoTitle}
            onChange={this.handleInputChange}
          />
          <button type="submit">Add</button>
        </form>
        <hr />
        <ul>
          {this.props.store.TodoListModel.todos.map(todo => (
            <Todo todo={todo} key={todo.id} />
          ))}
        </ul>
        <div>
          测试: {this.props.store.TodoListModel.unfinishedTodoCount}
        </div>
        <div>
          点击了几次: {this.props.store.TodoListModel.testValue}
        </div>
      </div>
    );
  }

  @action
  handleInputChange = e => {
    this.newTodoTitle = e.target.value;
  };

  @action
  handleFormSubmit = e => {
    this.props.store.TodoListModel.addTodo(this.newTodoTitle || '我是测试');
    this.props.store.TodoListModel.test ++;
    this.newTodoTitle = "";
    e.preventDefault();
  };
}

export default TodoList;



```

---
_Source: https://npm.io/package/angel-mobx · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._