diff --git a/packages/shared/useToString/index.md b/packages/shared/useToString/index.md new file mode 100644 index 00000000000..2dbaa5c010a --- /dev/null +++ b/packages/shared/useToString/index.md @@ -0,0 +1,18 @@ +--- +category: Utilities +--- + +# useToString + +Reactively convert a ref to string. + +## Usage + +```ts +import { useToString } from '@vueuse/core' + +const number = ref(3.14) +const str = useToString(number) + +str.value // '3.14' +``` diff --git a/packages/shared/useToString/index.test.ts b/packages/shared/useToString/index.test.ts new file mode 100644 index 00000000000..d28abe79884 --- /dev/null +++ b/packages/shared/useToString/index.test.ts @@ -0,0 +1,19 @@ +import { ref } from 'vue-demi' +import { useToString } from '.' + +describe('useToString', () => { + it('default', () => { + const value = ref(123.345) + const str = useToString(value) + + expect(str.value).toBe('123.345') + + value.value = 'hi' + + expect(str.value).toBe('hi') + + value.value = { foo: 'hi' } + + expect(str.value).toBe('[object Object]') + }) +}) diff --git a/packages/shared/useToString/index.ts b/packages/shared/useToString/index.ts new file mode 100644 index 00000000000..ad4ae7f0842 --- /dev/null +++ b/packages/shared/useToString/index.ts @@ -0,0 +1,15 @@ +import type { ComputedRef } from 'vue-demi' +import { computed } from 'vue-demi' +import { resolveUnref } from '../resolveUnref' +import type { MaybeComputedRef } from '../utils' + +/** + * Reactively convert a ref to string. + * + * @see https://vueuse.org/useToString + */ +export function useToString( + value: MaybeComputedRef, +): ComputedRef { + return computed(() => `${resolveUnref(value)}`) +}