realmerit-mobx

doc

- createContainer 工厂函数创建上下文

``tsx
class Test {
count: number;
constructor() {
this.count = 0;
makeAutoObservable(
this,
{},
{
autoBind: true,
}
);
}
inc() {
this.count += 1;
}
}
const { Provider, useStore } = createContainer(() =>
useLocalObservable(() => new Test())
);

const Count: React.FC = observer(() => {
const store = useStore();

return (


`ts
class Test {
loadingStore: LoadingStore<'loadingName'>;
constructor() {
this.loadingStore = new LoadingStore();
// this.invoke必须是一个async
// 第二个参数不填则代表不需要loading
this.invoke = withRequest(this.invoke, 'loading的key');
}
async invoke() {
// 如果使用promise,则必须return
return Api.xxx().then(()=>{})

// 或者用await,推荐使用
let [err1,res2] = await to(somePromise())
let [err2,res2] = await to(somePromise())

}
// 获得loading
this.loadingStore.get(loading的key)
}
`

- 和 NGTable 一起使用

`tsx
class Test {
tableStore: TableStore;
constructor() {
this.tableStore = new TableStore(Api.getData, {
// rowKey 必传
rowKey: 'id',
defaultPageSize: 50,
currentKey: 'current',
pageSizeKey: 'pageSize',
defaultParam: { defaultParam: 'i am defaultParam' },
// formatResult强制返回total,dataSource的格式
formatResult: res => {
return {
total: res.total,
dataSource: res.dataSource,
};
},
});
}
}

// t.tableStore.table => 返回NGTable需要的各种(只读)
// t.tableStore.dataSource => 返回dataSource提供修改

// 同理,NEForm的Formlist也可以抽成一个hooks
function useColumns(){
const store = useStore();
// 返回一个对象
return useLocalObservable(()=>({
// 需要返回一个getter
get columns(){
{
title: 'key',
dataIndex: 'key',
key: 'key',
fixed: 'left'
},
{
title: 客户类型${store.title},
dataIndex: 'customerTypeName',
key: 'customerTypeName'
},
}
}))

}

const A = observer(props => {
const store = useStore();
const {columns} = useColumns()
return ;
});
}
`

- 如何在 store 里使用 props

`tsx
class Store {
propsStore: PropsStore;
constructor() {
this.propsStore = new PropsStore();
// xxx
}
}

const A = observer(props => {
const store = useStore();
useSyncProps(store, 'id', props.id);
// 支持数组使用
useSyncProps(store, ['id', 'xxx'], props);

return ;
});

const B = observer(props => {
const store = useStore();
return