# useToggle

## 基础使用

```
<template>
    <div>
      <p>useToggleDemoState: {{useToggleDemoState}}</p>
      <button @click="handleUseTToggle">设置指定值</button>
      <button @click="useTToggle">useTToggle</button>
      <button @click="useTSetLeft">useTSetLeft</button>
      <button @click="useTSetCenter">useTSetCenter</button>
      <button @click="useTSetRight">useTSetRight</button>
    </div>
</template>

<script lang="ts">

import { ref } from 'vue';
import { useToggle } from 'v3hooks';


export default {



  setup() {
    //useToggle 测试
    const [ useToggleDemoState, [ useTToggle, useTSetLeft, useTSetCenter, useTSetRight]] = useToggle('left','center','right');

    const handleUseTToggle = ()=>{
      useTToggle('center')
    };

    return {
      useToggleDemoState,
      handleUseTToggle,
      useTToggle,
      useTSetLeft,
      useTSetCenter,
      useTSetRight,
    }
  }
}
</script>
```

useToggle接受多个参数，且在actions中进行同等数量导出。Actions中第一个为toggle切换，其余为设置对应参数。

## 异步值Toggle

```
<template>
  <div class="hello">
    <div> {{state}}</div>
    <button @click="toggle">toggle</button>
    <button @click="setToggle">setToggle</button>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue';
import { useToggle,useTimeout } from "../../../dist/index.js";
export default {

  setup() {

    const platform = ref<string>('安装 App');
    const platform2 = ref<string>('安装中...');
    const [state, [toggle]] = useToggle(platform, platform2,'不安装');

    useTimeout(() => {
      platform.value = `安装 ios App`
      platform2.value = '安装中2....'
    }, 3000);

    const setToggle = ()=>{
      toggle(platform)
    }

    return {
      state,
      toggle,
      setToggle
    };
  },
};
</script>
```

useToggle可以接受ref值的切换，内部支持了响应式，如果ref值发生变化,state会监听其变化同步修改。

## Api

```
type State = string | number | boolean | undefined;
type RefState = Ref<State>;
type Fn = (v?: any) => void;
type Actions = Fn[];
function useToggle<T extends State, U extends RefState>(
    ...args: (T | U)[]
): [U, Actions];
```

### Params

| 参数    | 说明     | 类型        | 默认值    |         |           |                    |        |         |                |   |
| ----- | ------ | --------- | ------ | ------- | --------- | ------------------ | ------ | ------- | -------------- | - |
| value | 需要切换的值 | <p>string | number | boolean | undefined | </p><p>Ref\<string | number | boolean | undefined></p> | - |
| ...   | 同上     | 同上        | -      |         |           |                    |        |         |                |   |

### Result

| 参数      | 说明   | 类型      |
| ------- | ---- | ------- |
| state   | 状态值  | -       |
| actions | 操作集合 | Actions |

### Actions

| 参数     | 说明                                     | 类型                    |
| ------ | -------------------------------------- | --------------------- |
| toggle | 触发状态更改的函数，可以接受可选参数修改状态值                | (state?: any) => void |
| action | 位置同value值索引位置一致，按照value顺序设置state为vulue | () => void            |