介绍:mobx和vuex一样都是状态管理。使用mobx的时候需要注意的是要引入
1、import { makeAutoObservable } from "mobx"
用于将模块中的数据更改为响应式
constructor() {
// 将数据改为响应式
makeAutoObservable(this)
}
2、import { observer } from "mobx-react-lite"
将组件的数据改为响应式,如果不使用,交互时mobx中的数据会变,视图不会改变
可以理解为:实时改变该组件的状态
使用:导入后包裹该组件
function Test() {}
export default observer(Test)
3、计算属性
使用get +函数
// 计算属性使用get标识符
get doubleCount() {
return this.count % 2
}
安装mobx
使用 yarn add mobx mobx-react-lite
使用
1、将store进行模块化,分别建立listStore和countStore
countStore.js
// 导入mbox函数、
import { makeAutoObservable } from "mobx"
class CountStore {
// 定义数据
count = 10
constructor() {
// 将数据改为响应式
makeAutoObservable(this)
}
// 计算属性使用get标识符
get doubleCount() {
return this.count % 2
}
// 注册action函数
addCount = () => {
this.count++
}
}
// 暴露
export { CountStore }
listStore.js
// 导入mbox函数、
import { makeAutoObservable } from "mobx"
class ListStore {
// 定义数据
count = 10
constructor() {
// 将数据改为响应式
makeAutoObservable(this)
}
// 计算属性使用get标识符
get doubleCount() {
return this.count % 2
}
// 注册action函数
addCount = () => {
this.count++
}
}
// 暴露
export { ListStore }
2、在index.js中封装一下,导出useStore
// 整合countStore和listStore
import React from "react"
// 导入
import { CountStore } from "./countStore"
import { ListStore } from "./listStore"
class RootStore {
constructor() {
//初始化子模块
this.countStore = new CountStore()
this.listStore = new ListStore()
}
}
// 实例化RootStore
const rootStore = new RootStore()
// 和Provider value={传递的数据},
// useContext先从Provider value中查找数据,如果查不到,就会找createContext中传递的参数
const context = React.createContext(rootStore)
// 通过useContext拿到rootStore中的对象然后返回
const useStore = () => React.useContext(context)
export { useStore }
3、在代码中使用,这里只是打印了一下useStore中的两个子模块
import { observer } from "mobx-react-lite"
import { useStore } from "../store"
function Test() {
console.log(useStore())
const { countStore, listStore } = useStore()
console.log(countStore)
console.log(listStore)
return <div></div>
}
export default observer(Test)