Vue3 hooks .

Using vue3.x composition api in react-hooks style.

Advantage:

1. Semantics is better.
2. Logic is clearer.

I highly recommend using it.

Use

pnpm i @kalu5/vue3-hooks

useState

The correct way to open State.

eg:

<script setup lang="ts">
import { useState } from '@kalu5/vue3-hooks'
const [state, setState] = useState<number>(0)
</script>

<template>
  <h1>{{ state }}</h1>
  <button @click="setState((state) => state.value + 1)">
    Add
  </button>
  <button @click="setState((state) => state.value - 1)">
    Minus
  </button>
</template>

useReducer

eg:

<script setup lang="ts">
import { useReducer } from '@kalu5/vue3-hooks'
function reducer(state, action) {
  if (action.type === 'add')
    return state.value + 1
  return state.value - 1
}
const [state, dispatch] = useReducer<number>(reducer, 1)
const [newState, newDispatch] = useReducer<number>(reducer, 2, (init: number) => init * 3)
</script>

<template>
  <h1>{{ state }}</h1>
  <h2>{{ newState }}</h2>
  <button @click="dispatch({ type: 'add' })">
    Add
  </button>
  <button @click="dispatch({ type: 'minus' })">
    Minus
  </button>
</template>