mobx的介绍和使用

什么是mobox

是一个用来管理状态的库，如果被观测组件发生改变，会自动渲染有关页面,告别setState;
mbox编程的3个重点：
1.observer观测器：带有观测器的react组件或者属性被mobx实时观测
2.observable可观测对象：由mobx建立的可观测对象
3.action更新事件：标识观测对象的改变事件

mobox的安装和使用

1.安装

npm install mobx,mobx-react-lite --save
根目录新建store文件并在store中新建index.js和test.Store.js

// test.Store.js module
    import { makeAutoObservable } from 'mobx'
    
    class TestStore {
    
      userInfo = {}
      constructor() {
        // 响应式
        makeAutoObservable(this)
      }
      setUser(){
          this.userInfo ={name:"张三"}
      }
      get getUser(){
          return this.userInfo 
      }
     
    }
    
    export default TestStore 
//index.js
    // 把所有的模块做统一处理
    // 导出一个统一的方法 useStore
    import React from "react"
    import TestStore from "./test.Store"
    
    
    import { configure } from "mobx"
    configure({
      enforceActions: "never",
    })
    
    
    class RootStore {
      constructor() {
        this.testStore = new TestStore ()
    
      }
    }

//下面的代码都是固定的，换一个平台代码也不会

// 实例化根
// 导出useStore context
const rootStore = new RootStore()
const context = React.createContext(rootStore)

const useStore = () => React.useContext(context)

export { useStore }

2.使用

在使用的模块导出store

import { useStore  } from '@/store'
    import { observer } from 'mobx-react-lite'
    const App=()=>{
        const {  testStore } = useStore()
        //使用test里面的方法
        loginStore.getUser()
    }
    //重点：需要使用observer包装起来才可以
    export default observer(App)