From 2b869adb9ebb1013c29b5c4f9b5df64d3d312c8d Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Thu, 4 Aug 2022 13:55:31 +0800
Subject: [PATCH] feat(useToString): new function

---
 packages/shared/useToString/index.md      | 18 ++++++++++++++++++
 packages/shared/useToString/index.test.ts | 19 +++++++++++++++++++
 packages/shared/useToString/index.ts      | 15 +++++++++++++++
 3 files changed, 52 insertions(+)
 create mode 100644 packages/shared/useToString/index.md
 create mode 100644 packages/shared/useToString/index.test.ts
 create mode 100644 packages/shared/useToString/index.ts

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<any>(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<unknown>,
+): ComputedRef<string> {
+  return computed(() => `${resolveUnref(value)}`)
+}