react mobx 基本用法示例小结

import React, { useContext } from "react";
import DemoStore from "./DemoStore";
class RootStore {
  constructor() {
    this.demoStore = DemoStore;
    //如果还有其他文件，依照上面引入即可
  }
}
const rootStore = new RootStore()
const context = React.createContext(rootStore)
const useMobStore = () => useContext(context)
export {useMobStore};

import { makeAutoObservable, toJS } from 'mobx';
class DemoStoreData{
	number: 1; // 数据
	constructor() {
	   makeAutoObservable(this)
	}
	// 更新数据(此方法可以是异步的，可以在里面调完接口在更新数据)
	updateNumber = (data) =>{
		this.number = data;
	}
}
const DemoStore = new DemoStoreData()
export default DemoStore;

// 导入的是 三 步骤 创建的index.js 文件
import { useMobStore } from "./mobx/index.js"; 
import { observer } from "mobx-react-lite";
const PageList = () => {
	// 解构的是 三 步骤里的 demoStore 
	const { demoStore } = useMobStore();
	return (
		<div>
			{demoStore.number}
		</div>
	)
}
export default observer(PageList);

import {action , computed,makeObservable,observable} from "mobx"

class Store{
  //在mobx6.x版本中，需要在构造函数中声明数据类型
  constructor(){
     makeObservable(
    //指定目标
    this,
   //定义当前mobx类对象中的数据类型
  {
    list:observable,
    add:action,
    minus:action,
    amount:computed}
)
}
   list=Array.from(Array(8),(_,i)=>{
    return {id:'ID-'+i,name:`华为手机Mate2${i}`,price:Math.ceil(Math.random() * 2000 + 3000), count: 1}
})
//在类中，有一个getter方法，在使用的时候是一个数据
get amount(){
    return this.list.reduce((r,it)=>{
   r += it.price * it.count
   return r
},0)
}
}
add(key,step){
   console.log('-------- add',key,step)
   this.list= this.list.map(it =>{
     if(it.id === key) it.count += step
     return it
})
  console.log(this.list)
}

minus(key,step){
  console.log('---------minus',key,step)
  this.list=this.list,map(it =>{
  if(it.id === key) it.count -=step
  return it
})
}
}
export default new Store()

//new是实例对象 Store类 ，Store是导出类

import React from 'react'
import List from './List'
import {inject,observer} from 'mobx-react'
function Cart({cart}){
   return(
  <div>
  <h1>{cart.amount}</h1>
</div>
)
} 
export default inject('cart')(observer(Cart))
//inject是纯函数 里面是数据state ， observer是观察方法 里面是组件

constructor(){
  makeObservable(
 //指向
this,
{    //定义当前mobx类对象中数据类型
  list:observable,
  add:action,
  minus:action,
  amount:computed
})
}

let ObersverComponent = observer(List)
export default inject('cart')(observerCompent)