在Next.js13及以上版本中的App Router模式下使用Mobx

项目结构

“next”: “14.1.4”,
“react”: “^18”,
“tailwindcss”: “^3.3.0”,

下载

pnpm install mobx
pnpm install mobx-react

注意：mobx-react里依赖了mobx-react-lite，mobx-react-lite是mobx-react的轻量版，它增加了对hooks的支持，所有更加推荐在react hooks项目中使用mobx-react-lite 它常使用的API主要为Observer和useLocalObservable，这两个API主要用在函数组件内部

当前版本：
“mobx”: “^6.12.3”,
“mobx-react”: “^9.1.1”,

新建store/UserStore.ts

import {
   makeAutoObservable} from "mobx";  
  
class UserStore{
     
	name:string = "xiaban";  
	  
	constructor() {
     
	makeAutoObservable(this);  
	}  
	  
	setName = (name:string) => {
     
	this.name = name;  
	}  
}  

const userStore = new UserStore();  
export default userStore;

新建store/RootStore.ts

import userStore from "@/store/UserStore";  
  
export const RootStore = {
   userStore}

新建app/_component/StoreContext.tsx

"use client";