1、简单使用
安装
yarn add mobx-react-lite
counter.Store.js
import { makeAutoObservable } from "mobx"
class CounterStore {
count = 0
constructor() {
//把数据弄成响应式
makeAutoObservable(this)
}
//定义action函数(修改数据)
addCount = () => {
this.count++
}
}
//导出给react使用
const counterStore = new CounterStore()
export { counterStore }
react组件App.js中使用:
import { counterStore } from "./store/counter.Store";
//导入中间件连接mobx 和 react 完成响应式变化
import {observer} from "mobx-react-lite"
function App () {
return (
<div className="App">
{counterStore.count}
<button onClick={counterStore.addCount}>+</button>
</div>
)
}
//包裹App
export default observer(App)
2、含有计算属性
counter.Store.js
import { computed, makeAutoObservable } from "mobx"
class CounterStore {
count = 0
list = [1, 2, 3, 4, 5, 6]
constructor() {
//把数据弄成响应式 标记filterList是计算属性
makeAutoObservable(this,{
filterList:computed
})
}
//计算属性
get filterList () {
return this.list.filter(item => item > 2)
}
//定义action函数(修改数据)
addList = () =>{
this.list.push(7,8,9)
}
//定义action函数(修改数据)
addCount = () => {
this.count++
}
}
//导出给react使用
const counterStore = new CounterStore()
export { counterStore }
react组件App.js中使用:
使用时需要observer(App)
import { counterStore } from "./store/counter.Store";
//导入中间件连接mobx 和 react 完成响应式变化
import {observer} from "mobx-react-lite"
function App () {
return (
<div className="App">
{/* 简单使用 */}
{counterStore.count}
<button onClick={counterStore.addCount}>+</button>
<br />
{/* 使用计算属性 */}
{counterStore.filterList.join('-')}
</div>
)
}
//包裹App
export default observer(App)
3、模块化
使用useContext机制导出。
模块counter.Store.js:
import { makeAutoObservable } from "mobx"
class CounterStore {
count = 0
constructor() {
//把数据弄成响应式
makeAutoObservable(this)
}
//定义action函数(修改数据)
addCount = () => {
this.count++
}
}
//导出给react使用
export { CounterStore }
模块list.Store.js
import { makeAutoObservable } from "mobx"
class ListStore {
list = [1, 2, 3, 4, 5, 6]
constructor() {
makeAutoObservable(this)
}
//计算属性
get filterList () {
return this.list.filter(item => item > 2)
}
//定义action函数(修改数据)
addList = () => {
this.list.push(7, 8, 9)
}
}
export { ListStore }
组合子模块index.js
使用useContext完成统一封装方法
import React from "react"
import { ListStore } from "./list.Store.js"
import { CounterStore } from "./counter.Store.js"
class RootStore {
constructor() {
// 对子模块进行实例化操作
//将来实例化new RootStore时,根实例有两个属性counterStore、listStore
this.counterStore = new CounterStore()
this.listStore = new ListStore()
}
}
//实例化操作
const rootStore = new RootStore()
//使用useContext完成统一封装方法 使用useContext查找机制:优先从Provider value查,
//如果查不到 就会找createContext(rootStore)传过来的默认参数rootStore
const context = React.createContext(rootStore)
//导出useStore方法 供组件通过useContext拿到根实例
// React.useContext 在 useStore 函数中调用。必须以单词“use”开头React钩子/钩子规则:useStore 不能userStore
const useStore = () => React.useContext(context)
export { useStore }
react组件App.js中使用:
使用时需要observer(App)
import { useStore } from "./store/index"
//导入中间件连接mobx 和 react 完成响应式变化
import {observer} from "mobx-react-lite"
function App () {
//拿到根实例
const rootStore = useStore()
//使用解构赋值 也可以直接用rootStore.counterStore
const {counterStore} = useStore()
// const {listStore} = useStore() rootStore.listStore
return (
<div className="App">
{/* 简单使用 */}
{counterStore.count}
<button onClick={counterStore.addCount}>+</button>
<br />
{rootStore.listStore.filterList.join('-')}
<button onClick={rootStore.listStore.addList}>修改数组</button>
</div>
)
}
//包裹App
export default observer(App)