Mobx介绍
mobx和react的关系,相当于vuex和vue的关系
状态管理工具
类似的工具还有:redux,dva,recoil
使用最多的是mobx和redux
Mobx环境配置
Mobx是一个独立的响应式的库,可以独立于任何UI框架存在,但是通常大家习惯把它和React进行绑定使用,用Mobx来做响应式数据建模,React作为UI视图框架渲染内容,我们环境的配置需要三个部分
- 一个create-react-app创建好的React项目环境
- mobx框架本身
- 一个用来链接mobx和React的中间件
安装
npm install mobx mobx-react-lite
实现方法
初始化mobx
初始化步骤
- 定义数据状态state
- 在构造器中实现数据响应式处理 makeAutoObservble
- 定义修改数据的函数action
- 实例化store并导出
定义一个store
// 编写第一个mobx store案例
import { makeAutoObservable } from "mobx"
class CounterStore {
// 1,定义数据
count = 0
constructor() {
// 2,把数据弄成响应式
makeAutoObservable(this)
}
// 3,定义一个函数
addCount = () => {
console.log(this.count)
this.count++
}
}
// 4,实例化,然后到处给react使用
const counterStore = new CounterStore()
export { counterStore }
使用
// 1,导入countStore实例
import { counterStore } from "./store/counter"
// 2,导入中间件连接mobx react完成响应式
import { observer } from 'mobx-react-lite'
function App () {
return (
<div className="App">
<button onClick={counterStore.addCount}>{counterStore.count}</button>
</div>
)
}
// 3,包裹APP,实现响应式
export default observer(App)
computed计算属性
实现步骤
- 生命一个存在的数据
- 通过get关键词 定义计算属性
- 在 makeAutoObservable 方法中标记计算属性
import { computed, makeAutoObservable } from "mobx"
class CounterStore {
list = [1, 2, 3, 4]
// 标记filterList为计算属性
constructor() {
makeAutoObservable(this, {
filterList: computed
})
}
// 计算属性
get filterList () {
return this.list.filter(item => item > 2)
}
addCount = () => {
this.list.push(6, 7, 8)
}
}
const counterStore = new CounterStore()
export { counterStore }
使用方法
// 1,导入countStore实例
import { counterStore } from "./store/counter"
// 2,导入中间件连接mobx react完成响应式
import { observer } from 'mobx-react-lite'
function App () {
return (
<div className="App">
<button onClick={counterStore.addCount}>{counterStore.list.join('-')}</button>
<button onClick={counterStore.addCount}>{counterStore.filterList.join('-')}</button>
</div>
)
}
// 3,包裹APP,实现响应式
export default observer(App)
模块化
统一使用一个store
例如:
counterStore:
import { computed, makeAutoObservable } from "mobx"
class CounterStore {
count = 0
constructor() {
makeAutoObservable(this)
}
addCount = () => {
this.count++
}
}
export default CounterStore
ListStore:
// 编写第一个mobx store案例
import { computed, makeAutoObservable } from "mobx"
class ListStore {
list = [1, 2, 3, 4]
// 标记filterList为计算属性
constructor() {
makeAutoObservable(this, {
filterList: computed
})
}
// 计算属性
get filterList () {
return this.list.filter(item => item > 2)
}
addList = () => {
this.list.push(6, 7, 8)
}
}
export default ListStore
组合store,放入index.js
// 组合子模块
// 封装统一导出的mobx
import CounterStore from "./counter.Store"
import ListStore from "./list.Store"
import React from "react"
class RootStore {
constructor() {
// 实例化
this.counterStore = new CounterStore()
this.listStore = new ListStore()
}
}
// 实例化
const store = new RootStore()
// 使用react context 机制,完成统一方法封装
// 之前使用Provider value= {传递的数据}
// 查找机制:useContext有限从Provider value 如果找不到,就会找默认参数
// createContext方法传递过来的 默认参数
const context = React.createContext(store)
// 通过useContext拿到rootStore实例对象
// 只要在业务组件中 调用useStore() 就能获取rootStore
const useStore = () => React.useContext(context)
export { useStore }
例如在APP中使用
// 1,导入countStore实例
import { useStore } from "./store/index"
// 2,导入中间件连接mobx react完成响应式
import { observer } from 'mobx-react-lite'
function App () {
//
const store = useStore()
// 结构赋值,破坏响应式,用哪个store就解析哪个
// const {counterStore,listStore} = useStore()
return (
<div className="App">
<button onClick={store.counterStore.addCount}>{store.counterStore.count}</button>
<button onClick={store.listStore.addList}>{store.listStore.filterList.join('-')}</button>
</div>
)
}
// 3,包裹APP,实现响应式
export default observer(App)