import { useContext } from "react"
import MyContext from '../../utils/Context'
//引入Observer監(jiān)聽組件  實現數據和視圖層的雙向改變
import { Observer } from 'mobx-react'

const Mobx = () => {
    //hook有規(guī)則  useContext只能在組件里面用
    const store = useContext(MyContext);

    return (
        <Observer>
            {() => {
                return (
                    <div>
                        <p>我是Mobx的應用</p>
                        <ul>
                            <li>mobx組件</li>
                            <li>使用mobx 的數據 msg === {store.msg}</li>
                            <li>使用mobx 的數據 number === {store.number}</li>
                            <li>使用mobx 的數據 str === {store.str}</li>
                            <li>mobx的計算屬性 1 ： {store.double}</li>
                            <li>mobx的計算屬性 2 ： {store.tatal}</li>
                            <button onClick={() => { store.changeNum() }}>改變munber</button>
                            <button onClick={()=> {store.changeStr('柳林')}}>改變str</button>
  
                        </ul>
                    </div>
                )
            }}
        </Observer>

    )
}
export default Mobx

//倉庫文件  放所有的狀態(tài). 數據 
import { makeAutoObservable, runInAction, autorun, reaction } from "mobx"

function createDoubler(value) {

    return makeAutoObservable({

        //這是放狀態(tài)的
        msg: '我是公共數據',
        number: 20,
        str: '程小小',
        value,

        //關鍵字 get 就代表這是一個計算屬性 函數內部必須要返回一個值
        get double() {
            return this.number * 2
        },

        //get 計算屬性可以有多個
        get tatal() {
            return this.str + this.number
        },

        //actions  所有的方法 方法內部   內部可以放異步操作
        changeNum() {
            console.log('changeNum 函數執(zhí)行了');

            //異步操作會報警號 ，但是不會報錯  解決方法：用runInaction包起來

            setTimeout(() => {
                //如果action里面用了異步 ，最好將你異步里面改變state的那步操作 用runInaction包起來 ，可以優(yōu)化一下
                runInAction(() => {
                    this.number++
                })

            }, 2000)
        },

        changeStr(v) {
            this.str = v;

        }

    })
}

let store = createDoubler()

//autorun 類似于監(jiān)聽  和可以寫在組件里面
autorun(() => {
    let a = store.number;
    console.log('autorun 執(zhí)行了');
})

//Reaction 指定你要監(jiān)聽的東西  和監(jiān)聽的作用一樣
reaction(() => store.number, () => {
    console.log('reaction 函數執(zhí)行了');
})


//導出一個對象
export default store

//把 創(chuàng)建context提出去
import { createContext } from 'react'

const MyContext = createContext()

export default MyContext