新增 useSet 的文档和示例

Author: niqingyang

README.md

@@ -89,7 +89,7 @@
     - [`useTimeout`](./docs/useTimeout.md) — re-renders component after a timeout.
     - [`useTimeoutFn`](./docs/useTimeoutFn.md) — calls given function after a timeout. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/animation-usetimeoutfn--demo)
     - [`useTween`](./docs/useTween.md) — re-renders component, while tweening a number from 0 to 1. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/animation-usetween--easing-demo)
-    - [`useUpdate`](./docs/useUpdate.md) — returns a callback, which re-renders component when called.
+    <!-- - [`useUpdate`](./docs/useUpdate.md) &mdash; returns a callback, which re-renders component when called. -->
       <br/>
       <br/>
 - [**Side-effects**](./docs/Side-effects.md)
@@ -109,6 +109,7 @@
     - [`usePermission`](./docs/usePermission.md) &mdash; query permission status for browser APIs.
       <br/>
       <br/>
+<!--
 - [**Lifecycles**](./docs/Lifecycles.md)
     - [`useEffectOnce`](./docs/useEffectOnce.md) &mdash; a modified [`useEffect`](https://reactjs.org/docs/hooks-reference.html#useeffect) hook that only runs once.
     - [`useEvent`](./docs/useEvent.md) &mdash; subscribe to events.
@@ -123,6 +124,7 @@
     - [`useDeepCompareEffect`](./docs/useDeepCompareEffect.md), [`useShallowCompareEffect`](./docs/useShallowCompareEffect.md), and [`useCustomCompareEffect`](./docs/useCustomCompareEffect.md) &mdash; run an `effect` depending on deep comparison of its dependencies
       <br/>
       <br/>
+-->
 - [**State**](./docs/State.md)
     - [`createMemo`](./docs/createMemo.md) &mdash; factory of memoized hooks.
     - [`createReducer`](./docs/createReducer.md) &mdash; factory of reducer hooks with custom middleware.

docs/useSet.md

@@ -0,0 +1,27 @@
+# `useSet`
+
+Vue state hook that tracks a [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set).
+
+## Usage
+
+```jsx
+import {useSet} from 'vue-next-use';
+
+const Demo = {
+    setup(){
+        const [set, { add, has, remove, toggle, reset }] = useSet(new Set(['hello']));
+
+        return () => (
+            <div>
+                <button onClick={() => add(String(Date.now()))}>Add</button>
+                <button onClick={() => reset()}>Reset</button>
+                <button onClick={() => remove('hello')} disabled={!has('hello')}>
+                    Remove 'hello'
+                </button>
+                <button onClick={() => toggle('hello')}>Toggle hello</button>
+                <pre>{JSON.stringify(Array.from(set), null, 2)}</pre>
+            </div>
+        );
+    }
+};
+```

stories/useSet.stories.js

@@ -0,0 +1,31 @@
+import {useSet} from "../src/index";
+import {ShowDemo, ShowDocs} from './util/index';
+
+export default {
+    title: 'State/useSet',
+    argTypes: {},
+};
+
+export const Docs = ShowDocs(require('../docs/useSet.md'));
+
+export const Demo = ShowDemo({
+    setup() {
+        const [set, {add, has, remove, reset, toggle}] = useSet(new Set(['hello']));
+
+        return () => (
+            <div>
+                <button onClick={() => add(String(Date.now()))}>Add</button>
+                <button onClick={() => reset()}>Reset</button>
+                <button onClick={() => remove('hello')} disabled={!has('hello')}>
+                    Remove 'hello'
+                </button>
+                <button onClick={() => toggle('hello')}>Toggle 'hello'</button>
+                <pre>{JSON.stringify(Array.from(set.value), null, 2)}</pre>
+            </div>
+        );
+    },
+});
+
+
+
+