VueUse State 状态
VueUse createGlobalState 创建全局状态,可以在跨Vue实例使用非常有用,你可以在A组件和B组件之间共享状态。典型的应用场景就是购物车,比如我们通常需要在所有的页面显示购物车内商品的数量,这时你可以使用全局状态来实现。
点击访问>>VueUse createInjectionState 是对Vue3 Provide/Inject的封装实现组件传值,它可把数据穿透组件传给子组件使用,解决了Provide/Inject 无法追踪数据源的问题。
点击访问>>VueUse createSharedComposable 组件间共享事件,可以解决重复监听事件的问题。
点击访问>>VueUse useAsyncState ,它会将异步结果包裹在一个响应式的对象中,在执行异步操作时,将对象中的loading属性设置为true,执行完后loading属性设置为false,并将结果更新state或error属性。
点击访问>>Vueuse useDebouncedRefHistory 库用于记录 ref 对象值的历史记录,同时支持撤销和重做操作。它与 useRefHistory 类似,但它提供debounce 选项,防止频繁记录历史数据,它具有防抖功能。
点击访问>>VueUse useLastChanged 可以记录最后一次修改时间,如果你新赋的值和没有变化,是不会记录时间的,比如原有的值等于123,再次赋值123,不会记录这次修改时间。
点击访问>>Vueuse useLocalStorage 是对js的localStorage进行的封装,实现了响应式的本地存储,使用更佳简单。
点击访问>>Vueuse useManualRefHistory 和useRefHistory不同需要手动调用commit()保存当前记录,手动跟踪ref的更改历史,还提供撤消和重做功能。
点击访问>>VueUse useRefHistory 可以自动跟踪响应式对象的历史更改,还提供撤消和重做功能。
点击访问>>VueUse useStorageAsync 使用方法和 useStorage 一样,但是它支持异步。
点击访问>>Vueuse useSessionStorage 是对原生js的sessionStorage进行的封装,实现了响应式的Session本地存储,sessionStorage可以把数据存储在浏览器端,当关闭网页时数据会自动清除,而localStorage是永久存储在浏览器中,那么VueUse对这两原生方法做了响应式封装。
点击访问>>Vueuse useStorage 封装了原生的LocalStorage/SessionStorage方法实现响应式存储,我个人不建议用这个方法,可以直接用useLocalStorage和useSessionStorage,他俩用起来更简单。
点击访问>>VueUse useThrottledRefHistory 可以自动跟踪响应式对象的更改历史,还提供撤消和重做功能,useThrottledRefHistory具有限流功能。
点击访问>>