vueuse 中文文档

VueUse State 状态

VueUse State 状态

createGlobalState 全局状态

VueUse createGlobalState 创建全局状态,可以在跨Vue实例使用非常有用,你可以在A组件和B组件之间共享状态。典型的应用场景就是购物车,比如我们通常需要在所有的页面显示购物车内商品的数量,这时你可以使用全局状态来实现。

点击访问>>

createInjectionState 组件传值

VueUse createInjectionState 是对Vue3 Provide/Inject的封装实现组件传值,它可把数据穿透组件传给子组件使用,解决了Provide/Inject 无法追踪数据源的问题。

点击访问>>

createSharedComposable

VueUse createSharedComposable 组件间共享事件,可以解决重复监听事件的问题。

点击访问>>

useAsyncState 异步响应式

VueUse useAsyncState ,它会将异步结果包裹在一个响应式的对象中,在执行异步操作时,将对象中的loading属性设置为true,执行完后loading属性设置为false,并将结果更新state或error属性。

点击访问>>

useDebouncedRefHistory

Vueuse useDebouncedRefHistory 库用于记录 ref 对象值的历史记录,同时支持撤销和重做操作。它与 useRefHistory 类似,但它提供debounce 选项,防止频繁记录历史数据,它具有防抖功能。

点击访问>>

useLastChanged 最后修改时间

VueUse useLastChanged 可以记录最后一次修改时间,如果你新赋的值和没有变化,是不会记录时间的,比如原有的值等于123,再次赋值123,不会记录这次修改时间。

点击访问>>

useLocalStorage 响应式存储

Vueuse useLocalStorage 是对js的localStorage进行的封装,实现了响应式的本地存储,使用更佳简单。

点击访问>>

useManualRefHistory

Vueuse useManualRefHistory 和useRefHistory不同需要手动调用commit()保存当前记录,手动跟踪ref的更改历史,还提供撤消和重做功能。

点击访问>>

useRefHistory 历史快照

VueUse useRefHistory 可以自动跟踪响应式对象的历史更改,还提供撤消和重做功能。

点击访问>>

useStorageAsync

VueUse useStorageAsync 使用方法和 useStorage 一样,但是它支持异步。

点击访问>>

useSessionStorage 响应式存储

Vueuse useSessionStorage 是对原生js的sessionStorage进行的封装,实现了响应式的Session本地存储,sessionStorage可以把数据存储在浏览器端,当关闭网页时数据会自动清除,而localStorage是永久存储在浏览器中,那么VueUse对这两原生方法做了响应式封装。

点击访问>>

useStorage 响应式存储

Vueuse useStorage 封装了原生的LocalStorage/SessionStorage方法实现响应式存储,我个人不建议用这个方法,可以直接用useLocalStorage和useSessionStorage,他俩用起来更简单。

点击访问>>

useThrottledRefHistory

VueUse useThrottledRefHistory 可以自动跟踪响应式对象的更改历史,还提供撤消和重做功能,useThrottledRefHistory具有限流功能。

点击访问>>
Catalog
vueuse 入门 State 状态 createGlobalState 全局状态 createInjectionState 组件传值 createSharedComposable useAsyncState 异步响应式 useDebouncedRefHistory useLastChanged 最后修改时间 useLocalStorage 响应式存储 useManualRefHistory useRefHistory 历史快照 useStorageAsync useSessionStorage 响应式存储 useStorage 响应式存储 useThrottledRefHistory Elements 元素 Browser 浏览器 Sensors 感应监测