React/practise/33.Mobx/7.mobx模块化/App.js

// 导入中间件，连接mobx、react，完成响应式变化
import { observer } from 'mobx-react-lite'
import { useStore } from './store/index'


function App() {
    // 注意：解构赋值到 store 实例对象就可以了，防止破坏响应式，用哪个 store 就解构那个 store
    const { counterStore } = useStore()

    return (
        <div className="App">
            {/* list = [1, 2, 3, 4, 5, 6] 是引用型数据类型，值存放在堆内存中，在栈内存存放的是一个地址，这个地址将会指向堆内存中引用数据类型的具体数值 */}
            {counterStore.list.map((item) => {
                return <div key={item}>{item}</div>;
            })}
            <br />
            <button onClick={() => {
                counterStore.addList();
                console.log(counterStore.list);
            }
            }>+</button>
            <br />
            {/* {counterStore.count}
            <br/>
            <button onClick={counterStore.addCount}>+</button> */}
        </div>
    )
}

export default observer(App)