add: improved functionality => support types including Object

Author: holux-design

playground/app.vue

@@ -2,17 +2,16 @@
   <div>
     Nuxt module playground!
 
-    <p>message: {{ message }}</p>
+    <p>name: {{ name }}</p>
 
-    <button @click="changeText('Hello Nuxt module!')">Change Text</button>
-    <button @click="changeText('Hello world!')">Reset Text</button>
+    <button @click="changeName()">Change Name</button>
   </div>
 </template>
 
 <script setup lang="ts">
-const message = useQueryRef('message', 'Hello world!')
+const name = useQueryRef('name', { first: 'Lukas', last: 'Smith' }, 'Object')
 
-const changeText = (text: string) => {
-  message.value = text
+const changeName = () => {
+  name.value.last = 'Hawk'
 }
 </script>

src/runtime/composables/useQueryRef.ts

@@ -2,37 +2,43 @@ import { useRoute } from 'nuxt/app'
 
 declare const ref, watch
 
-export const useQueryRef = (key: string, defaultValue: any = null): any => {
-  const loadedValue = loadQueryParamFromURL(key)
+type QueryParamType = 'string' | 'string[]' | 'number' | 'number[]' | 'Object'
+
+export const useQueryRef = (key: string, defaultValue: any = null, type: QueryParamType = 'string') => {
+  const loadedValue = loadQueryParamFromURL(key, type)
 
   const queryRef = ref(loadedValue || defaultValue)
 
   watch(
     queryRef,
     async (newVal) => {
-      updateQueryParamInURL(key, newVal, defaultValue)
+      updateQueryParamInURL(key, newVal, type)
     },
     { deep: true },
   )
 
   return queryRef
 }
 
-function updateQueryParamInURL(key, value, defaultValue) {
+function updateQueryParamInURL(key, value, type: QueryParamType) {
   if (typeof window == 'undefined') return
 
-  const url = new URL(window.location.href)
-
-  if (value == defaultValue) {
-    url.searchParams.delete(key)
-  } else {
-    url.searchParams.set(key, value)
-  }
+  if (['number[]', 'string[]'].includes(type)) value = value.join(',')
+  if (type == 'Object') value = JSON.stringify(value)
 
+  const url = new URL(window.location.href)
+  url.searchParams.set(key, value)
   url.search = decodeURIComponent(url.search)
   window.history.pushState(null, '', url.toString())
 }
 
-function loadQueryParamFromURL(key: string): string | undefined {
-  return useRoute()?.query?.[key]?.toString()
+function loadQueryParamFromURL(key: string, type: QueryParamType) {
+  const loadedString = useRoute()?.query?.[key]?.toString() || ''
+  if (!loadedString) return
+
+  if (type == 'number') return +loadedString
+  if (type == 'number[]') return loadedString.split(',').map((n) => +n)
+  if (type == 'string[]') return loadedString.split(',')
+  if (type == 'Object') return JSON.parse(loadedString)
+  return loadedString
 }