mobx安装及其简单使用
安装:
【mobx安装及其简单使用】yarn add mobx(单独的js 文件)
yarn add mobx-react(react和mobx进行绑定)
父组件 数据注入
子组件 获取(任意组件)
新建store/store.js
import {observable, computed, action, autorun,runInAction} from 'mobx';
// import {observable, computed, action} from 'mobx';
class Store {
@observable tradeCfg = {
'sadf':'sadf'
};
@observable baseInfo = {};
@observable callback = null;
@observable token = [
{
"id":1,
"name":"YD"
},
{
"id":2,
"name":"ETH"
}
];
}export default Store;
打开Router.js 第一步:引入store文件和mobx-react
第二步:定义一个对象,用Provider将App进行包裹
const stores = {
FStore: new FirstStore(),
}
父级注入管理 1、引入mobx-react Provider
2、引入store.js
new Store()
引入一个新的store.js
stores = {
newStore: new newStore(),
newStore1: new newStore1(),
newStore2: new newStore2(),
}
3、Provider 注入 {...store}
任意子页面使用mobx 1.import { NavLink, withRouter } from 'react-router-dom'
2.import {observer,inject} from 'mobx-react';
3.在类组件之上
@withRouter
@inject('FirstStore')
@observer
函数组件使用mobx 结果hook 1.import { withRouter } from 'react-router-dom'
2.import { observer, MobXProviderContext, inject } from 'mobx-react'
3.
function useStores(name) {
return React.useContext(MobXProviderContext)[name]
}
推荐阅读
- JS中的各种宽高度定义及其应用
- Mac安装Chromedriver
- MongoDB,Wondows下免安装版|MongoDB,Wondows下免安装版 (简化版操作)
- MAC安装Mongo
- 【Hadoop踩雷】Mac下安装Hadoop3以及Java版本问题
- Spark|Spark 数据倾斜及其解决方案
- react|react 安装
- VueX--VUE核心插件
- python-安装sublime遇到异常
- typeScript入门基础介绍