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具有限流功能。

点击访问>>