@feige0629/react-common-store
v0.1.4
Published
```tsx yarn add @feige0629/react-common-store
Downloads
172
Readme
1、使用方法
yarn add @feige0629/react-common-store
npm install @feige0629/react-common-store
调用
import * as React from "react";
import { StoreRoot } from "@feige0629/react-common-store";
export default function App() {
return (
<StoreRoot>
...
</StoreRoot>
);
}
定义数据
import { initState, compute } from "@feige0629/react-common-store";
export const $showGuides = initState<boolean>(true);
export const $selectedFlattenLayers = compute(({ get }) => {
const layerManager = get($layerManager)!;
const selectedLayers = get($selectedLayers)!;
return layerManager.toFlatten(selectedLayers);
});
使用
import { useStoreRoot, useStoreStateSetPromise, useStoreStateValue, useStoreValue, useStoreState } from "@feige0629/react-common-store";
import { $showGuides, $selectedFlattenLayers } from "./stores";
// 第一种
const root = useStoreRoot();
const layers = root.get($layers);
root.set($layers, '新数据');
// 第二种
useStoreValue($showGuides, '新数据'); // 绑定全局数据
const showGuidesStore = useStoreValue($showGuides); // 获取数据
const value = showGuidesStore.value;
showGuidesStore.update(value); // 设置数据
// 第三种
const showGuidesStore = useStoreStateValue($showGuides); // 仅仅用来获取数据
// 第四种
const showGuidesStore = useStoreStateSetPromise($showGuides);
showGuidesStore('新数据').then(complete => { // 设置数据
if (!complete) {
return false;
}
....
return complete;
});
// 第五种
const [guidelines, setGuidelines] = useStoreState($showGuides);
guidelines // 获取数据
setGuidelines('新数据') // 设置数据
// 第六种
const setShowGuidesValue = useStoreStateSetValue($showGuides);
setShowGuidesValue('新数据') // 设置数据