一、创建文件
stores ----- auth.js 例子文件 ----- index.js 总入口
二、安装
yarn add mobx
yarn add mobx-react
三、书写相应代码
auth.js
import相应的文件
import { observable
, action
} from "mobx"
声明class类，并导出
class AuthStore {
@observable 变量名
= 值
@boservable values
= {
username
= "梁又文"
sex
= "男"
}
@action
方法名(参数
) {
console
.log(参数
)
}
@action
setName(name
){
this.values
.username
= name
}
}
export { AuthSotre
}
index.js
import相应文件
import React
, { createContext
, useContext
} from "react"
import { 类名
} from "../stores/文件名"
import { AuthSotre
} from "../stores/auth"
创建Context对象
const context
= createContext({
定义方法名
: new 类名(),
authStore
: new AuthStore()
})
将Context对象全局导出
export const useStores = () => useContext(context
)
四、配置package.json
将react隐藏的webpack暴露出来，释放之前请先提交代码
yarn
eject
安装插件
yarn add @babel
/plugin
-proposal
-decorators
修改package.json
"babel": {
"plugins": [
["@babel/plugin-proposal-decorators", {"legacy": true}]
],
"presets": [
"react-app"
]
}
五、在组件中进行使用
import相应文件
import { observer
} from "mobx-react"
import { useStores
} from "../stores"
使用observer监控组件，并解构我们需要的对象出来并使用
const Demo
= observer(()=>{
const { AuthStore
} = useStores()
return (
<>
<h1
>我是Demo组件
</>
</>
)
})
解构后我们就可以使用该对象的属性及方法
const Demo
= observer(()=>{
const { AuthStore
} = useStores()
const changeName = () => {
AuthStore
.setName("改名字后的梁又文")
}
return (
<>
<h1
>我是Demo组件，我的名字叫
{ AuthStore
.values
.username
}</h1
>
<button onClick
={changeName
}>改名字
</button
>
</>
)
})
