feat: add use-set-state (#33)

Author: hongaah

packages/hooks/docs/.vitepress/config.ts

@@ -183,6 +183,7 @@ function getHooksSidebar() {
         { text: 'useSessionStorageState', link: '/useSessionStorageState/' },
         { text: 'useMap', link: '/useMap/' },
         { text: 'useSet', link: '/useSet/' },
+        { text: 'useSetState', link: '/useSetState/' },
       ],
     },
 

packages/hooks/src/index.ts

@@ -29,6 +29,7 @@ import useMedia from './useMedia'
 import useNetwork from './useNetwork'
 import useSessionStorageState from './useSessionStorageState'
 import useSet from './useSet'
+import useSetState from './useSetState'
 import useSize from './useSize'
 import useScroll from './useScroll'
 import useToggle from './useToggle'
@@ -76,6 +77,7 @@ export {
   usePreview,
   useSessionStorageState,
   useSet,
+  useSetState,
   useSize,
   useScroll,
   useToggle,

packages/hooks/src/useSetState/demo/demo.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>{{ JSON.stringify(state) }}</div>
+  <div class="contain">
+    <vhp-button @click="initAge()">
+      add age
+    </vhp-button>
+
+    <vhp-button @click="updateAge()">
+      update age
+    </vhp-button>
+
+    <vhp-button @click="addTag()">
+      add tag
+    </vhp-button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useSetState } from 'vue-hooks-plus'
+
+  const [state, setState] = useSetState({ name: 'vue-hooks-plus' })
+
+  const initAge = () => {
+    setState({
+      age: 1,
+    })
+  }
+
+  const addTag = () => {
+    setState({
+      ...state.value,
+      age: 3,
+      tag: 'nice',
+    })
+  }
+
+  const updateAge = () => {
+    setState({
+      age: 2,
+    })
+  }
+</script>
+
+<style scoped lang="less">
+  .contain {
+    button {
+      margin-right: 8px;
+    }
+  }
+</style>

packages/hooks/src/useSetState/index.md

@@ -0,0 +1,29 @@
+---
+map:
+  # 映射到docs的路径
+  path: /useSetState
+---
+
+# useSetState
+
+管理 object 类型 响应式 的 Hooks，支持解构赋值，更方便维护。
+
+## 代码演示
+
+### 基础用法
+
+<demo src="./demo/demo.vue"
+  language="vue"
+  title="基本用法"
+  desc=""> </demo>
+
+## API
+
+```typescript
+const [state, setState] = useSetState<S extends Record<string, any>>
+(initialState: StateType<S>)
+:[
+  [S] extends [Ref<any>] ? S : Ref<UnwrapRef<S>>,
+   (patch: Record<string, any>) => void
+ ]
+```

packages/hooks/src/useSetState/index.tsx

@@ -0,0 +1,21 @@
+import { ref, Ref, unref, UnwrapRef } from 'vue'
+import { merge } from 'lodash'
+
+type StateType<S> = S | (() => S) | Ref<S> | (() => Ref<S>)
+
+function useSetState<S extends Record<string, any>>(
+  initialState: StateType<S>,
+): [[S] extends [Ref<any>] ? S : Ref<UnwrapRef<S>>, (patch: Record<string, any>) => void] {
+  const getInitialState = () => unref(initialState)
+
+  const state = ref<S>(getInitialState() as S)
+
+  const setMergeState = (patch: Record<string, any>) => {
+    const newState = unref(patch)
+    state.value = newState ? merge(state.value, newState) : state.value
+  }
+
+  return [state, setMergeState]
+}
+
+export default useSetState