Vue Новая игрушка VueUse

внешний интерфейс

предисловие

В прошлый раз, когда я смотрел конференцию раннего чата, You Da снова упомянул об этом.VueUseбиблиотека . Любопытно на мгновение, нажмите, чтобы посмотреть. Ребята, я прямо, ребята. Это не то время, когда я хотел написать это самvueверсияhooksбиблиотека? (потому что я чувствуюvue3иhooksСлишком похоже) Но у меня пока не очень получается, вы прямо разбили мою мечту, давайте посмотрим вместе!Автор VueUse Энтони Фу делится компонуемым Vue

чтоVueUse

VueUseоснован наComposition APIНабор полезных функций. С точки зрения непрофессионала, это пакет функций инструмента, который может помочь вам быстро реализовать некоторые общие функции, чтобы не писать его самому и решать повторяющийся рабочий контент. и на основеComposition APIупаковка. впустить тебяvue3более удобный.

Легко начать

УстановитьVueUse

npm i @vueuse/core

использоватьVueUse

// 导入
import { useMouse, usePreferredDark, useLocalStorage } from '@vueuse/core'

export default {
  setup() {
    // tracks mouse position
    const { x, y } = useMouse()

    // is user prefers dark theme
    const isDark = usePreferredDark()

    // persist state in localStorage
    const store = useLocalStorage(
      'my-storage',
      {
        name: 'Apple',
        color: 'red',
      },
    )

    return { x, y, isDark, store }
  }
}

сверхуVueUseИмпортированы три функции,useMouse,usePreferredDark,useLocalStorage.useMouseЭто метод отслеживания текущих координат мыши, он будет получать текущую позицию мыши в режиме реального времени.usePreferredDarkЭто метод оценки того, нравятся ли пользователю темные цвета, и он определяет, нравится ли пользователю темная тема в режиме реального времени.useLocalStorageЭто метод, используемый для сохранения данных, который будет сохранять данные в локальном хранилище.

и мы знакомы сСтабилизаторидросселирование 

import { useThrottle , useDebounce } from '@vueuse/core'

const input = ref('')
const throttled = useThrottle(input, 1000, false)  // 延迟1s获取 input 的值

const debounced = useDebounce(input, 1000)
input.value = 'bar'
console.log(debounced.value)  // 延迟1s 更新input的值

есть ещеcomponentфункции, используемые в

<script setup>
import { ref } from 'vue'
import { onClickOutside } from '@vueuse/core'

const el = ref()

function close () {
  /* ... */
}

onClickOutside(el, close)
</script>

<template>
  <div ref="el">
    Click Outside of Me
  </div>
</template>

В приведенном выше примере с использованиемonClickOutsideФункция, которая запускает функцию обратного вызова при щелчке за пределами элемента. Это прямо здесьcloseфункция. существуетcomponentиспользуется таким образом

<script setup>
import { OnClickOutside } from '@vueuse/components'

function close () {
  /* ... */
}
</script>

<template>
  <OnClickOutside @trigger="close">
    <div>
      Click Outside of Me
    </div>
  </OnClickOutside>
</template>

Обратите внимание ⚠️ здесьOnClickOutsideФункция — это компонент, а не функция. необходимостьpackage.jsonустановлен в@vueuse/components.

Есть также функции для глобального обмена состоянием

// store.js
import { createGlobalState, useStorage } from '@vueuse/core'

export const useGlobalState = createGlobalState(
  () => useStorage('vue-use-local-storage'),
)

// component.js
import { useGlobalState } from './store'

export default defineComponent({
  setup() {
    const state = useGlobalState()
    return { state }
  },
})

Это простое разделение состояния. Расширьте его немного. Передайте параметр, вы можете изменитьstoreценность.

Также оfetch, следующий 👇 — это простой запрос.

import { useFetch } from '@vueuse/core'

const { isFetching, error, data } = useFetch(url)

у него есть еще многоoptionпараметры могут быть настроены.

// 100ms超时
const { data } = useFetch(url, { timeout: 100 })

// 请求拦截
const { data } = useFetch(url, {
  async beforeFetch({ url, options, cancel }) {
    const myToken = await getMyToken()

    if (!myToken)
      cancel()

    options.headers = {
      ...options.headers,
      Authorization: `Bearer ${myToken}`,
    }

    return {
      options
    }
  }
})

// 响应拦截
const { data } = useFetch(url, {
  afterFetch(ctx) {
    if (ctx.data.title === 'HxH')
      ctx.data.title = 'Hunter x Hunter' // Modifies the resposne data

    return ctx
  },
})

Более

узнать большеДокументация VueUse, есть еще один пункт, может быть вам нужноvue-demi

Категории