目录

• 什么是mobx
• 装饰器babel
• • 安装和注册装饰器
  • 理解装饰器
• mobx
• • 安装mobx
  • 定义store
  • 项目全局注册store
  • 在类组件中使用mobx的store
  • 在函数组件中使用mobx的store
  • store与本地存储结合

什么是mobx

一个比redux简便的状态管理工具

装饰器babel

安装和注册装饰器

1. 安装装饰器

npm i @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties -D 

2. 在vite.config.js中注册装饰器

import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"// https://vitejs.dev/config/
export default defineConfig({plugins: [react({babel: {plugins: [["@babel/plugin-proposal-decorators", { legacy: true }],["@babel/plugin-proposal-class-properties", { loose: true }],],},}),],
})

完成装饰器注册后，需要重启一次项目

理解装饰器

如下的代码，可以在控制台，看到Home这个类组件有个名为study的函数，@addFun这个装饰器，相当于起了和Home=addFun(Home)这句代码一样的作用。
注意：vscode中直接写装饰器会报错，在vscode的设置中搜索Experimental Decorators，启用这个选项即可。

import React, { Component } from "react"function addFun(ele) {ele.prototype.study = () => {console.log("新增的类方法")}return ele
}@addFun
class Home extends Component {render() {console.log(this)return (
主页
)}
}export default Home

mobx

安装mobx

npm i mobx
npm i mobx-react

定义store

在src下新建store文件夹，在store下新建文件index.js,文件中代码如下：

import { makeAutoObservable } from "mobx"/* mobx6以上版本的定义store方式 */
class Store {constructor() {// 自动观察所有的state变量makeAutoObservable(this)}//定义一个state变量count = 0// 定义一个actionincrementCount() {this.count += 1}
}/* mobx6以下版本的定义store方式 */
// import { observable,action } from "mobx"
// class Store {
//   //定义一个state变量
//   @observable count = 0
//   // 定义一个action
//   @action incrementCount() {
//     this.count+=1
//   }
// }const store = new Store()
export default store

项目全局注册store

在main.jsx中做如下修改：

import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App"
import "./index.css"
import store from "./store"
import { Provider } from "mobx-react"ReactDOM.createRoot(document.getElementById("root")).render(store}>
)

在类组件中使用mobx的store

注意，observer装饰器的作用

import React, { Component } from "react"
import { Link } from "react-router-dom"
// 引入store
import store from "../store"
import { observer } from "mobx-react"/* store中的方法调用并改变state中的变量后，组件不会重新render,
使用mobx-react中的observer装饰组件可以解决这个问题 */
@observer
class ClassEle extends Component {render() {return (
类组件页面
go fun页面
计数器
{/* 使用store中的变量和函数 */}() => store.incrementCount()}>{store.count}
)}
}export default ClassEle

在函数组件中使用mobx的store

import React from "react"
import { Link } from "react-router-dom"
import store from "../store"
import { observer } from "mobx-react"const FunEle = () => {return (
函数组件页面
go class页面
计数器
{/* 使用store中的变量和函数 */}() => store.incrementCount()}>{store.count}
)
}
// 使用observer包裹函数组件，解决state中变量改变后，不自动render的问题
export default observer(FunEle)

store与本地存储结合

对store/index.js进行如下改写：

import { makeAutoObservable } from "mobx"// mobx6以上版本的定义store方式
class Store {constructor() {// 自动观察所有的state变量makeAutoObservable(this)}//定义一个state变量count = 0 || localStorage.getItem("count")// 定义一个actionincrementCount() {this.count += 1localStorage.setItem("count", this.count)}
}const store = new Store()
export default store