@vueuse/core中api记录

 

 

useIntervalFn

<template>
  <div>
    <p>{{ word }}</p>
    <button v-if="isActive" class="orange" @click="pause">
      Pause
    </button>
    <button v-if="!isActive" @click="resume">
      Resume
    </button>
  </div>
</template>

import { useIntervalFn } from '@vueuse/core'
const greetings = ['Hello', 'Hi', 'Yo!', 'Hey', 'Hola', 'こんにちは', 'Bonjour', 'Salut!', '你好']
const word = ref('Hello')

const { pause, resume, isActive } = useIntervalFn(() => {
  console.log('开始定时器')
  word.value = greetings[Math.round(Math.random() * (greetings.length - 1))]
}, 3000, {immediate: true, immediateCallback: true})

watchEffect(() => {
  console.log('isActive.value -> ', isActive.value)
})

 

 

useTimeoutFn

<template>
  <p>{{ text }}</p>
  <button :disabled="isPending" @click="restart()">
    Restart
  </button>
</template>



import { useTimeoutFn } from '@vueuse/core'

const defaultText = 'Please wait for 3 seconds'
const text = ref(defaultText)
const { start, stop, isPending } = useTimeoutFn(() => {
  text.value = 'Fired!'
}, 5000)

const restart = () => {
  text.value = defaultText
  start()
}

setTimeout(() => {
  console.log('stop')
  stop()
}, 2000)

watchEffect(() => {
  console.log('isPending.value -> ', isPending.value)
})

 

 

 

useDebounceFn 防抖 (短信验证码、提交表单resize事件、input 事件（当然也可以用节流，实现实时关键字查找）)

<template>
  <button @click="clickedFn">
    Smash me!
  </button>
  <note>Delay is set to 1000ms and maxWait is set to 5000ms for this demo.</note>

  <p>Button clicked: {{ clicked }}</p>
  <p>Event handler called: {{ updated }}</p>
</template>

import { useDebounceFn } from "@vueuse/core";

const updated = ref(0);
const clicked = ref(0);
const debouncedFn = useDebounceFn(() => {
  updated.value += 1;
}, 1000, { maxWait: 5000 });

const clickedFn = () => {
  clicked.value += 1;
  debouncedFn();
};

window.addEventListener("resize", debouncedFn);

useThrottleFn节流

• scroll 事件，单位时间后计算一次滚动位置
• input 事件（上面提到过）
• 播放事件，计算进度条

<template>
  <div>
    <button @click="clickedFn">
      Smash me!
    </button>
    <note>Delay is set to 1000ms for this demo.</note>

    <p>Button clicked: {{ clicked }}</p>
    <p>Event handler called: {{ updated }}</p>
  </div>
</template>

const updated = ref(0)
const clicked = ref(0)
const throttledFn = useThrottleFn(() => {
  updated.value += 1
}, 1000)

const clickedFn = () => {
  clicked.value += 1
  throttledFn()
}

 

 

useToggle 切换显示隐藏


<template>
  <div>
    <p>Value: {{ isFlag ? 'ON' : 'OFF' }}</p>
    <button @click="setFlag()">
      Toggle
    </button>
    <button @click="isFlag = true">
      Set ON
    </button>
    <button @click="isFlag = false">
      Set OFF
    </button>
  </div>
</template>


import { useToggle } from "@vueuse/core";

const [isFlag, setFlag] = useToggle(false)
const [isFlag2, setFlag2] = useToggle(true)

watchEffect(() => {
  console.log('isFlag -> ', isFlag.value)
  console.log('isFlag2 -> ', isFlag2.value)
})

 

 

 

useAxios axios请求 要安装(@vueuse/integrations)


import { useAxios } from "@vueuse/integrations/useAxios";

const { data, loading, finished, isFinished } = useAxios(
  // "https://jsonplaceholder.typicode.com/todos/1",
  "http://39.106.100.236/PERSONAL/personal/loginJwt",
  {
    method: 'post',
    "Content-Type": "application/json",
    menuCode: "ship",
    token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJjb21wYW55SWQiOjQ5NiwiYWNjb3VudE5hbWUiOiJ4bWNzIiwicGhvbmUiOiIxMzE1NDI2NjcyMCIsImNvbXBhbnlOYW1lIjoi6ZW_55ub5Y-RIiwiaXNzIjoidHciLCJpc1N1cGVyQWRtaW4iOmZhbHNlLCJpc0FkbWluIjpmYWxzZSwidXNlck5hbWUiOiLljqbpl6jmtYvor5UiLCJ0aXRsZSI6Iua1t-mhuui-vua1t-S4iuaZuuiDveeuoeeQhuezu-e7nyIsImV4cCI6MTY0MTU2ODU1OSwidXNlcklkIjoxMzAsInRva2VuIjoiQXlFWHNRc0FJTGs9In0.pQL7xa-Phua9QrLWne0NtBzeW_-m8jF02w3mv2J0ED4",
    data: {
      "pwd": "xmcs123456",
      "userName": "xmcs"
    }
  }
);

watchEffect(() => {
  // console.log('data -> ', data)
  // console.log('isFinished -> ', isFinished.value)
  // console.log('loading -> ', loading)
  // console.log('finished -> ', finished)
})

 

useNProgress 

<template>
  <note class="mb-2">
    Click to change progress status
  </note>
  <button @click="isLoading = !isLoading">
    {{ !isLoading ? 'Start' : 'Stop' }}
  </button>
  <b v-if="isLoading" class="ml-2">{{ (progress * 100).toFixed(0) }}%</b>
</template>

import { useNProgress } from "@vueuse/integrations/useNProgress";

const { isLoading, progress } = useNProgress(0.5, {
  minimum: 0.7,
})

watchEffect(() => { console.log('isLoading -> ', isLoading.value) console.log('progress -> ', progress.value) })

 

useJwt


<template>
  <div>
    <p>Header</p>
    <pre lang="json" class="ml-2">{{ JSON.stringify(header, null, 2) }}</pre>
    <p>Payload</p>
    <pre lang="json" class="ml-2">{{ JSON.stringify(payload, null, 2) }}</pre>
  </div>
</template>


import { useJwt } from "@vueuse/integrations/useJwt";


const encodedJwt = ref('eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJjb21wYW55SWQiOjQ5NiwiYWNjb3VudE5hbWUiOiJ4bWNzIiwicGhvbmUiOiIxMzE1NDI2NjcyMCIsImNvbXBhbnlOYW1lIjoi6ZW_55ub5Y-RIiwiaXNzIjoidHciLCJpc1N1cGVyQWRtaW4iOmZhbHNlLCJpc0FkbWluIjpmYWxzZSwidXNlck5hbWUiOiLljqbpl6jmtYvor5UiLCJ0aXRsZSI6Iua1t-mhuui-vua1t-S4iuaZuuiDveeuoeeQhuezu-e7nyIsImV4cCI6MTY0MTU3MDgyMCwidXNlcklkIjoxMzAsInRva2VuIjoiQXlFWHNRc0FJTGs9In0.ixrwutuIbAVEHKakJP30wO9f6xf02iKLUpBurBJ7w1Q')
const { header, payload } = useJwt(encodedJwt)


watchEffect(() => {
  console.log('payload -> ', payload.value) 
})

<template>
  <div>
<!--    {{ flag }}-->
<!--    <br>-->
<!--    {{ count }}-->
<!--    <br>-->
<!--    {{ id }}-->

    <br>
    {{state.hello}}
  </div>
</template>

<script setup>
import { defineComponent, computed, onMounted, ref } from "vue";
import { useSessionStorage } from "@vueuse/core";
import { useStorage } from '@vueuse/core'

// bind object
const state = ref(useStorage('my-store', { hello: 'hi', greeting: 'Hello' }, sessionStorage))
setTimeout(() => {
  state.value = {hello: '这个两秒后修改的值'}
}, 2000)

// bind boolean
const flag = useStorage('my-flag', true) // returns Ref<boolean>

// bind number
const count = useStorage('my-count', 0) // returns Ref<number>

// bind string with SessionStorage
const id = useStorage('my-id', 'some-string-id', sessionStorage) // returns Ref<string>