react使用mobx6动态加载数据

使用

1. 下载mobx库和mobx-react-lite库
2. 创建store.js

import { observable, action,makeAutoObservable } from 'mobx';

class BookStore{
     bookList=[];
     count=0;

     constructor(){
        makeAutoObservable(this); //使变量自动变成observerable变量
     }
     add=()=>{
     this.count++;
     }

     addBook=(book)=>{
     	fetch('/book/add')
     }

     getBookList=()=>{
        fetch('/book/list')
     }

     }
   
}
let bookStore=new BookStore();
export default bookStore

3.在react组件中observer包裹

import { observer } from 'mobx-react-lite';
const BookList= observer(() => {
	return()
})

注意事项

 1.mobx里的observer变量必须放在react render组件里才会刷新
 {/* render的组件里必须有mobx store的值才会刷新 */}
 return (
	<Button onClick={()=>{
		 localUserStore.add()
	}}>
		 {localUserStore.count}
	</Button>
)


2.非基础类型需要用toJs转换
在store.js定义
data={"id":1,"name","abc"}
在react中使用
toJs(store.data)

3.请求初始化数据在UseEffect中执行
 useEffect(() => {
    bookStore.getBorrowList();
  }, []);