毕业后第一次原公司倒闭换公司,第一个学习的项目用到mobx,特地写个日记记录在react中的使用
yarn add mobx
yarn add mobx-react
yarn add @babel/plugin-proposal-decorators
//package.json中babel添加 @babel/plugin-proposal-decorators
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
]
]
}
// mobx创建一个store
import { observable, computed, action, makeObservable } from "mobx";
class MobxStore {
username = 'water'
@observable userage = 24
@observable usernick = '水王'
@observable userlist = ['水王', '水鬼']
@computed get getUserList () {
return this.userlist
}
@computed get getUserAge () {
return this.userage
}
@action updateUserAge(newValue) {
this.userage = newValue
}
@action pushUserlist(newValue) {
this.userlist = [ ...this.userlist, newValue ]
}
constructor() {
makeObservable(this)
}
}
export default MobxStore
// 创建一个对象收集全部仓库
import MobxStore from "./userMobX";
const mobxStore1 = new MobxStore()
const mobxStores = {
mobxStore1
}
export default mobxStores
// index.js中导入provier和仓库合集
import { Provider } from 'mobx-react'
import mobxStores from './mobx';
....
root.render(
<React.StrictMode>
<Provider {...mobxStores}>
<App />
</Provider>
</React.StrictMode>
);
// 页面使用mobx的数据和修改
import React from 'react'
import { inject, observer } from 'mobx-react'
const MobXOut = (props) => {
const { mobxStore1 } = props
return(
<div>
'我是mobx'{mobxStore1.getUserAge}
{JSON.stringify(mobxStore1.getUserList)}
<button onClick={() => {mobxStore1.updateUserAge(666)}}>mobx修改state</button>
<button onClick={() => {mobxStore1.pushUserlist('demo')}}>mobx添加userlist</button>
</div>
)
}
export default inject('mobxStore1')(observer(MobXOut))