1.observable

Observable 值可以是JS基本数据类型、引用类型、普通对象、类实例、数组和映射

class Store {
  @observable count = 0
  //一定要加这一行
  constructor(){
      makeAutoObservable(this)
  }
  @action 
  increment=()=>{
    this.count++
  }
  foo='bar'
}

2.autorun

当你想创建一个响应式函数，而该函数本身永远不会有观察者时,可以使用 mobx.autorun。 这通常是当你需要从反应式代码桥接到命令式代码的情况，例如打印日志、持久化或者更新UI的代码

import {observable,action,makeAutoObservable, autorun} from 'mobx'
autorun(()=>{
  //当store.count发生改变。他会自动触发，需要给数据成员加上@observable
  console.log(store.count,'gggg');
  console.log(store.foo,'gggg');
}

3.computed

计算值(computed values)是可以根据现有的状态或其它计算值衍生出的值。 概念上来说，它们与excel表格中的公式十分相似。 不要低估计算值，因为它们有助于使实际可修改的状态尽可能的小。 此外计算值还是高度优化过的，所以尽可能的多使用它们。

class Store {
  @observable price=10
  @observable num=5
  @computed get totalPice(){
    return this.price*this.num
  }
}

        <p>总价格：{store.totalPice}</p>
        <p>总价格：{store.totalPice}</p>
        <p>总价格：{store.totalPice}</p>

计算属性存在缓存，使用多次实际只会执行一次,当依赖的属性发生改变他才会重新执行

4.action

4.1 基本使用

需要改变observable中的数据，最好使用action修改，尽可能避免使用store.的方式直接修改

import React from 'react';
import ReactDOM from 'react-dom';
import {observable,action,makeAutoObservable, autorun,computed} from 'mobx'
import {observer}from 'mobx-react'
//1.初始化mobx仓库
class Store {
  @observable count = 0
  //一定要加这一行
  constructor(){
      makeAutoObservable(this)
  }
  @action 
  increment=()=>{
    this.count++
  }
  foo='bar'
  @observable price=10
  @observable num=5
  @computed get totalPice(){
    return this.price*this.num
  }
  @action change(){
      this.count=10
      this.foo='hello'
      this.foo='word'
  }
}
const store=new Store()
autorun(()=>{
  //这里只触发了一次
  console.log(store.foo,store.count,'fffrrrf');
})
store.count=20
store.foo='ttt'
store.change()
@observer
class App extends React.Component{
  render(){
    const {store}=this.props
    return(
      <div>
        <h1>我是一个仓库</h1>
        <h2>{store.count}</h2>
        <button onClick={store.increment}>增加</button>
        <p>总价格：{store.price*store.num}</p>
      </div>
    )
  }
}
ReactDOM.render(
    <App store={new Store()}/>,
  document.getElementById('root')
);

4.2 action.bound

绑定this，让当前this指向store，注意: action.bound 不要和箭头函数一起使用；箭头函数已经是绑定过的并且不能重新绑定。

4.3 异步action

严格模式下无法直接修改异步方法

import React from "react";
import ReactDOM from "react-dom";
import {
  observable,
  action,
  makeAutoObservable,
  autorun,
  configure,
  runInAction
} from "mobx";
import { observer } from "mobx-react";
configure({
  enforceActions: "observed",
});
//初始化mobx仓库
class Store {
  @observable count = 0;
  @observable num1 = 0;
  @observable num2 = 0;
  //一定要加这一行
  constructor() {
    makeAutoObservable(this);
  }
  @action
  increment = () => {
    this.count++;
  };
//1.定义一个同步函数用于修改，在异步函数中调用
  @action.bound
  changeCountAsync() {
    setTimeout(() => {
      this.shngecount()
    }, 1000);
  }
  @action.bound
  shngecount(){
    this.count=100
  }
//2.在异步函数中调用action函数，第一参数是修改函数的名称，这里使用函数自调用
  @action.bound
  changenum1Async() {
    setTimeout(() => {
      action('changnum1',()=>{
        console.log(this);
        this.num1=1002
      })()
    }, 1000);
  }
//3.使用runInAction
@action.bound
changenum2Async() {
  setTimeout(() => {
    runInAction(()=>{
      console.log(this);
      this.num2=1003
    })
  }, 1000);
}
}
const store = new Store();;
autorun(() => {
  //当store.count发生改变。他会自动触发，需要给数据成员加上@observable
  console.log( store.count, "fffrrrf");
  console.log( store.num1, "num1ffrrrf");
  console.log( store.num2, "num2ffrrrf");
});
//函数调用
store.changeCountAsync()
store.changenum1Async()
store.changenum2Async()
@observer
class App extends React.Component {
  render() {
    const { store } = this.props;
    return (
      <div>
        <h1>我是一个仓库</h1>
        <h2>{store.count}</h2>
        <button onClick={store.increment}>增加</button>
      </div>
    );
  }
}
ReactDOM.render(<App store={new Store()} />, document.getElementById("root"));

5.configure

强制使用action修改数据，使用严格模式。

import {observable,action,makeAutoObservable, autorun,computed,configure} from 'mobx'
configure({
  enforceActions:'observed'
})

6.runInAction

import React from 'react';
import ReactDOM from 'react-dom';
import {observable,action,makeAutoObservable, autorun,computed,configure,runInAction} from 'mobx'
import {observer}from 'mobx-react'
configure({
  enforceActions:'observed'
})
//1.初始化mobx仓库
class Store {
  @observable count = 0
  @observable foo= 'sxsddde'
  //一定要加这一行
  constructor(){
      makeAutoObservable(this)
  }
  @action 
  increment=()=>{
    this.count++
  }
}
const store=new Store()
autorun(()=>{
  console.log(store.foo,store.count,'fffrrrf');
})
//修改数据成员，适用于不定义action
runInAction(()=>{
  store.count=10
  store.foo='hello'
})
@observer
class App extends React.Component{
  render(){
    const {store}=this.props
    return(
      <div>
        <h1>我是一个仓库</h1>
        <h2>{store.count}</h2>
        <button onClick={store.increment}>增加</button>
      </div>
    )
  }
}
ReactDOM.render(
    <App store={new Store()}/>,
  document.getElementById('root')
);