fargo
1a822493ba
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
2.0 KiB
2.0 KiB
category
| category |
|---|
| Reactivity |
reactivePick
Reactively pick fields from a reactive object.
Usage
Basic Usage
import { reactivePick } from '@vueuse/core';
const obj = reactive({
x: 0,
y: 0,
elementX: 0,
elementY: 0,
});
const picked = reactivePick(obj, 'x', 'elementX'); // { x: number, elementX: number }
Predicate Usage
import { reactivePick } from '@vueuse/core';
const source = reactive({
foo: 'foo',
bar: 'bar',
baz: 'baz',
qux: true,
});
const state = reactivePick(source, (value, key) => key !== 'bar' && value !== true);
// { foo: string, baz: string }
source.qux = false;
// { foo: string, baz: string, qux: boolean }
Scenarios
Selectively passing props to child
<script setup lang="ts">
import { reactivePick } from '@vueuse/core';
const props = defineProps<{
value: string;
color?: string;
font?: string;
}>();
const childProps = reactivePick(props, 'color', 'font');
</script>
<template>
<div>
<!-- only passes "color" and "font" props to child -->
<ChildComp v-bind="childProps" />
</div>
</template>
Selectively wrap reactive object
Instead of doing this
import { useElementBounding } from '@vueuse/core';
import { reactive } from 'vue';
const { height, width } = useElementBounding(); // object of refs
const size = reactive({ height, width });
Now we can just have this
import { reactivePick, useElementBounding } from '@vueuse/core';
const size = reactivePick(useElementBounding(), 'height', 'width');
Type Declarations
export type ReactivePickReturn<T extends object, K extends keyof T> = {
[S in K]: UnwrapRef<T[S]>;
};
export type ReactivePickPredicate<T> = (value: T[keyof T], key: keyof T) => boolean;
export declare function reactivePick<T extends object, K extends keyof T>(
obj: T,
...keys: (K | K[])[]
): ReactivePickReturn<T, K>;
export declare function reactivePick<T extends object>(
obj: T,
predicate: ReactivePickPredicate<T>,
): ReactivePickReturn<T, keyof T>;