useState

useState 管理一状态值

基础用法

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Count2: {{ count2 }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script lang="ts" setup>
import { useState } from "hooks-vue3";

const [count, setCount] = useState<number>(0);
const [count2, setCount2] = useState<number>(10);

const increment = () => {
  setCount((prevCount) => prevCount + 1);
  setCount2((preCount) => preCount + 1);
};
</script>

API

const [state, setState] = useState();

参数TS类型

import type { Ref, UnwrapRef } from 'vue';

type SetStateAction<S> = S | ((prevState: UnwrapRef<S>) => S);

function useState<S>(
  initialState?: S,
): [Ref<S>, (state: SetStateAction<S>) => void]