mobx使用

一、安装mobx

npm i mobx
npm i mobx-react-lite

二、简单使用

// src/store/counter.js
// 编写第一个mobx store小案例
import {makeAutoObservable} from "mobx";
class CounterStore {
   // 1.定义数据
   count = 0
   constructor() {
      //2.把数据弄成响应式
      makeAutoObservable(this)
   }
//   3.定义action函数(次该数据)
   addCount = () =>{
      // console.log(this)
      this.count++
   }
}
// 4.实例化，导出给react使用
const countStore = new CounterStore()
export default countStore


// App.js
// 1.导入 countStore
import countStore from "./store/counter";
// 2.导入中间件 连接mobx react 完成响应式变化
import {observer} from "mobx-react-lite";

function App() {
   console.log(countStore)
   return (
      <div className="App">
         {/* 渲染store中的count */}
         <p>
            {countStore.count}
         </p>

         {/* 点击触发addCount事件 */}
         <button onClick={countStore.addCount}>增加</button>
      </div>
   );
}

export default observer(App);

三、mobx-computed

//src/store/counter.js
// 定义一个原始数据
   list = [1, 2, 3, 4, 5, 6]
// 定义计算属性
   get filterList() {
      return this.list.filter(item => item > 2)
   }


//App.js 
{/*使用计算属性*/}
<p>{countStore.filterList.join('-')}</p>

四、mobx-模块化

将store中的模块整合到 index.js 文件中，通过 index.js 可以调用其它两个模块的方法

• // src/store/index.js
  // 组合子模块
  // 封装统一导出供业务使用的方法
  import React from 'react'
  import ListStore from "./list.Store";
  import CounterStore from "./counter.Store";
  
  
  // 1.声明一个rootStore
  class RootStore {
     constructor() {
        // 对子模块进行实例化操作
        this.counterStore = new CounterStore()
        this.listStore = new ListStore()
     }
  }
  
  // 实例化操作
  const rootStore = new RootStore()
  // 使用creatContext机制 完成统一方法封装
  // 核心目的：让每个业务组件可以通过统一一样的方法获取store中的数据
  // Provider value={传递的数据}
  // 查找机制：useContext 优先从Provider value找
  // 如果找不到，就会从createContext方法传递过来的默认参数
  const context = React.createContext(rootStore)
  // 通过useContext拿到rootStore实例对象 然后返回
  const useStore = () => React.useContext(context)
  
  export default useStore
  

• // src/store/counter.Store.js
  // 编写第一个mobx store小案例
  import {makeAutoObservable} from "mobx";
  
  class CounterStore {
     // 1.定义数据
     count = 0
     // 定义一个原始数据
     list = [1, 2, 3, 4, 5, 6]
  
  
     constructor() {
        //2.把数据弄成响应式
        makeAutoObservable(this)
     }
  
     // 定义计算属性
     get filterList() {
        return this.list.filter(item => item > 2)
     }
  
     // 方法修改list
     addList = () => {
        this.list.push(7, 8, 9)
     }
  
     // 3.定义action函数(次该数据)
     addCount = () => {
        // console.log(this)
        this.count++
     }
  
  }
  
  // 4.实例化，导出给react使用
  export default CounterStore
  

• // src/store/list.Store.js
  import {makeAutoObservable} from "mobx";
  
  class ListStore{
     list = ['react','vue']
  
     constructor() {
        makeAutoObservable(this)
     }
  
     addList = () =>{
        this.list.push('Angular')
     }
  }
  
  export default ListStore
  

五、mobox的基础使用总结

1.初始化的mobox的过程是怎样的？
	声明数据 --> 响应式处理 --> 定义action函数 --> 实例化导出
	
2.mobox如何配合react，需要依赖什么包？
	mobox-react-lite作为链接包，导出observer方法，包裹组件（只能哈函数组件配合）
	
3.模块化解决了神魔问题？
	维护性问题
	
4.如何实现mobox的模块化？
	按照功能拆扥store模块，根模块中组合子模块，利用context机制依赖注入

六、mobox实战案例