useStorage doesn't serialize if initial value is null

Describe the bug

If the initial value is using null, useStorage will work just fine for simple types like strings, but it will put [Object object] into local storage if it’s set to an object.

It does serialize correctly if the initial object is an object.

Reproduction

https://play.vueuse.org/#N4IgDghgxg1hDmBTAziAXAbVAOwgW0XRADcBXRAWgBNE8BLEAGhGQHtSAnKQtEU7MDHhMQNZFA50wAFzqtsRAGrkABABFadFQAoAFhAA2AMxV1sKgGIdE2KLoCUp5CogqaxRAdZgz8FaVkDOmkATxcDLwB3ZxD2FWlWFUjJaUQVAFVsOg8OZEMVZTSAGToAIw4ISRQVI1YOAtUAJhUAMhUAZhFOAyJdaWkwZDQAemH+QXgAOihWPGGyShp6YaDS4bMaAA9JvAArVABfRhx8HhAAAQXSZERh5H1rKhE2Tm4icaERMQkpWXkiADKD0QVAaiHSN38gWCdBQky6HB6vD6AyGow+Uxmc0u5Gut3ulRB5wArJMAAyTACM62wW0mKDwk32ICOJwIRBxiDxwxm1me7C4ZwxXxQPxkcgUvAAwqwIogoH9zKwTCgbthZPlCioZXgwKxkDD5BlobIUAikSAUYMRmMBEJprNhpzubzECTyVSaXSGUzDgBdZhGOgGM1oUAAQTAYEmC3QoFSuoMEFSRAAPFRsiooEnkMgALwAHRA8EkoPgEDAFEpKl211kRhCFGQ0kq0iLAD4C+YVKnSgEEuZztm6LBCyxENIAS3UpSiyp2wCJ-FEs3JNh4Knhn3+vJO93e-2jUOgqOizdJ9PEI0O4vpMuVKxSrtN9uB3uVD3X0fh6fxxfk4g7Q3kuCQqNgpARC+h7YHuXapro7QLogiCbgh749mA1jtsAwDNgBBwHJumGIHum4ZsQ7bPGK0hEHQup1HewD+DcU51AgaQHDUHCzCoADkzo3DydSILxXZdjM2DNqYWQagYKh5iowBdh+H4QGgKhFmYwRFowykqaU6ngREekHAA3GJ2CjBJUl4ak8nMYgrEVEg2i8aUSa8Yw0kwoY9jmbY8g2Ze9l4k57Gue5ECeWBEEGH5FlGPwCoSio55TgBlLaI4SndrZiAxoYqgKUWpSsLMRb+QcFldoltiKqlE7pakjRZYpel5QVBhFW13aqepRaxDpekfgZGkgOUrBFiZlUJUl9VpZe7StTlH4dcQhVpApRkGDNCgEQcQA

System Info

vueuse

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a VueUse issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[okxiaoliang4]

My recommendation.

import type { StorageSerializers } from '@vueuse/core'
import { useStorage } from '@vueuse/core'

useStorage('my-info', null, localStorage, {
  serializer: StorageSerializers.object,
})

or you can wrap your useStorage e.g

import type { StorageSerializers } from '@vueuse/core'
import { useStorage } from '@vueuse/core'

export function wrapUseStorage<T>(...args: Parameters<typeof useStorage>) {
  return useStorage<T>(args[0], args[1], args[2], {
    serializer: StorageSerializers.object,
    ...args[3],
  })
}

wrapUseStorage('my-info', null)

[JMaylor]

Yes I did that, but it’s still totally unexpected behaviour. Also, the object I’m storing doesn’t require custom serialization. It just behaves differently depending on what the initial value is. That makes no sense to me.

If you’re initial value is null, how are we meant to know what to do with the value in localStorage? Suppose I have the below 4 refs, all using localStorage, and all starting off as null:

// all of the 4 declarations below initialise as null.
const myDate = useStorage('my-date', null)
const myCounter = useStorage('my-counter', null)
const myName = useStorage('my-name', null)
const myInfo = useStorage("my-info", null)

// myDate is a Date object and wants to parse / format ISO strings as the serialiser
myDate.value = new Date()

// myCounter is an integer and wants to use parseInt
myCounter.value = 12

// myName is a string and needs no serialisation
myName.value = 'jmaylor'

// myInfo is an object and wants to use JSON serialisation
myInfo.value = {
  address: 'somewhere',
  age: 50
}

At the point of declaring all 4 of the above refs, all initialised as null, each of these will require different serialisation later down the line. We are unable to infer that myCounter is going to be an integer, or that myInfo is going to be an object. This is why the serialisation has to be explicitly stated at initialisation. Hope this helps.