React + mobx

一、安装 mobx mobx-react

npm install mobx --save

npm install mobx-react --save

二、写一个store文件

observable: 观察对应的数据

import { observable } from "mobx";

class TodoList {

  // 利用

 @observable todos = []

}

​

export default new TodoList()

三、在对应的页面添加引用

index页面

import TodoList from './store/TodoList'

​

app页面

​

export default App {

 render() {

   

todoList的lenth是{this.props.todoList.length}

  }

}

到这里为止你就能拿到store的数据了，超级简单！

四、页面跟着store的数据改变发生改变

app.js页面添加观察

import { observable }  from 'mobx-react'

@observable // 给这个页面添加observable装饰器

export default App {

 render() {

   

todoList的lenth是{this.props.todoList.length}

  }

}

添加了observable的页面会根据注入的数据发生改变而重新渲染

五、Action

这里我们给todoList添加一个事件

import { observable, action } from "mobx";

class TodoList {

  // 利用

 @observable todos = []

 @action push() {

     this.todos.push({

         id: 1,

         name: 'new Task'

     })

  }

}

​

export default new TodoList()

我们在app添加一个btn

this.props.todoList.push}>点我添

点击按钮的时候，我们可以对应看到文本的长度在发生改变

六、computeds

计算一些对应的属性或数值

给todoList添一些料

import { observable, action, computed } from "mobx";

class TodoList {

  // 利用

 @observable todos = []

 @action push() {

     this.todos.push({

         id: 1,

         name: 'new Task'

     })

  }

 @computed get allIdCount() {

     return this.todos.reduce(init, item => {

         return init+item.id

     }, 0)

  }

}

​

export default new TodoList()

七、在app添加一个显示

目前todoList的id总和是：{this.props.todoList.allIdCount}