引入

yarn add mobx
yarn add mobx-react

使用装饰器语法

yarn eject
yarn add  @babel/plugin-proposal-decorators  
//package.json
"babel": {
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ]
  ],
}

全局使用

1. 一个文件创建全局变量和方法

• observable,action,makeObservable ```javascript // auth.js import React from ‘react’ import {observable,action,makeObservable} from ‘mobx’

class AuthStore { constructor(){ makeObservable(this) // 开启使用装饰器语法 } @observable isLogin = false; // 数据 @action setIsLogin(isLogin){ // 方法 this.isLogin = isLogin } } export default AuthStore

<a name="HhIAF"></a>
#### 2. 引入文件，使用 `useContext` 导出
- createContext, useContext
```javascript
index.js
import AuthStore from './auth'
import React, {createContext, useContext} from 'react'
const context = createContext({
  AuthStore: new AuthStore()
})
const useStore = () => useContext(context)
export default useStore

3. 在任意地方引入 index.js

• observer ```javascript import React from ‘react’; import useStores from ‘../stores/index.js’; import {observer} from ‘mobx-react’ // 引入 observer

const Component = observer(()={ // 数据更新时自动刷新页面 const { AuthStore } = useStores(); // 调用 useStore 获得 mobx 对象 const bindClick = (e)=> { AuthStore.setIslogin(!AuthStore.isLogin) // 使用方法 } return ( <>

Login: {AuthStore.isLogin}

<a name="pEKaa"></a>
# 组件内使用
```javascript
import {useLocalStore} from 'mobx-react'
const store = useLocalStore(()=>({}))

扩展

一般用法

import { observer, useLocalStore } from 'mobx-react';  
const Hooks = observer(() => {  
 const todo = useLocalStore(() =>  ({  
 title: 'Click to toggle', done: false,  toggle() {  
  todo.done = !todo.done  
  },  
 get emoji() {  
 return todo.done ? '😜' : '🏃'  
  },  
  }));  
 return <div onClick={todo.toggle}>  
    <h3>{todo.title} {todo.emoji}</h3>  
 </div>  
})

• 可以看到原来的修饰符@observer,
• 现在是使用 HOC 来进行扩展的;
• 还有另外的 2 种修饰方法:

  1: 使用 useObserver(()=>JSX.Element) 方法取代 observer(()=>JSX.Element)

  import { useLocalStore, useObserver } from 'mobx-react';  
  function Person() {  
  const person = useLocalStore(() => ({ name: 'John' }))  
  return useObserver(() => (  
  <div>  
    {person.name}  
    <button onClick={() => (person.name = 'Mike')}>No! I am Mike</button>  
  </div>  
  ))}

  2: 使用部分渲染, 只有被 <Observer></Observer> 包裹的才能监听到对应值的改变

  import { Observer, useLocalStore } from 'mobx-react';  
  function ObservePerson() {  
  const person = useLocalStore(() => ({ name: 'John' }))  
  return (  
  <div>  
    {person.name} <i>I will never change my name</i>  
    <div>  
        <Observer>{() => <div>{person.name}</div>}</Observer>  
        <button onClick={() => (person.name = 'Mike')}>  
  I want to be Mike  </button>  
    </div>  
  </div>  
  )}

  优化,分离,传值

  ```javascript import React, { FC } from ‘react’;import { observer, useLocalStore } from ‘mobx-react’;
  function initialFn(source) {
  return ({
  count: 2, get multiplied() {
  return source.multiplier * this.count
  },
  inc() {
  this.count += 1 },
  });
  }

const Counter: FC<{ multiplier: number }> = observer(props => {

const store = useLocalStore(
initialFn,
Object.assign({ a: 1 }, props),// 可以传任意值
);

return (