Specific usage of Vue new toy VueUse

Preface to the table of contents What is VueUse Easy to get started There are also familiar anti-shake and throttling There are also functions that share global state More

Preface

Last time I watched the front-end early chat conference, I mentioned a library of VueUse once again. Curious for 1 time, I took a look at it. Boy, I'm direct. Boy. Isn't that once I wanted to write an vue version of hooks library myself? (Because I think vue3 and hooks are too similar) But I'm not very good at it. Now you have shattered my dream directly. Let's take a look at it. VueUse Author Anthony Fu shares the combinable Vue_ Bi Li Bi Li _ bilibili

What is VueUse

VueUse is not Vue. use, it is a common toolset of Vue, Composition and API serving Vue 2 and 3, and it is one of the highest libraries of the same type of Star in the world at present. Its original intention is to change JS API, which originally did not support response, into JS, which saves programmers from writing related codes themselves.

VueUse is a set of practical functions based on Composition and API. Generally speaking, this is a tool function package, which can help you quickly realize some common functions, so as not to write and solve the repetitive work. And encapsulation of Opportunity Composition API. Make you more comfortable in vue3.

Easy to get started

Installing VueUse

npm i @vueuse/core

Using VueUse

//  Import 
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 }
  }
}

Above, three functions are imported from VueUse, useMouse, usePreferredDark and useLocalStorage. useMouse is a monitor of the current mouse coordinates of a method, he will real-time access to the current position of the mouse. usePreferredDark is a method to judge whether users like dark colors. It will judge whether users like dark themes in real time. useLocalStorage is a method for persisting data, which persists data to local storage.

There are also familiar anti-shake and throttling

import { throttleFilter, debounceFilter, useLocalStorage, useMouse } from '@vueuse/core'

//  Change in a throttling way  localStorage  Value of 
const storage = useLocalStorage('my-key', { foo: 'bar' }, { eventFilter: throttleFilter(1000) })

// 100ms Update the position of the mouse after 
const { x, y } = useMouse({ eventFilter: debounceFilter(100) })

There are also functions used in 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>

In the above example, the onClickOutside function is used, which triggers a callback function when the outside of the element is clicked. This is the close function here. This is how it is used in component

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

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

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

Note that the OnClickOutside function here is a component, not a function. package is required. @ vueuse/components is installed in json.

There are also functions that share global state

// 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 }
  },
})

This is a simple state sharing. Expand 1. You can change the value of store by passing one parameter.

As for fetch,