Limits of JSON serialization for Pinia state backup in Vue 3

Short answer

JSON cannot preserve Pinia reactivity or class methods by itself. JSON.stringify strips functions, class instances, circular references, and undefined values. toRaw() gives you a plain object, but Vue does not automatically re-wrap restored plain objects into reactive proxies or reattach class methods. You must serialize type information, rebuild instances before restoration, and patch the store with store.$patch().

Confirmed behavior and limits

• Pinia 2.x with Vue 3.x stores state as reactive proxies.
• JSON.stringify(store.state) or JSON.stringify(toRaw(store.state)) produces plain data only.
• Functions, getter logic implemented as methods, class instances, and circular references are lost during stringify.
• reactive() deeply converts plain objects, but it does not know your original class constructors.
• store.$patch(plainObject) merges plain data into existing reactive state; it does not re-instantiate classes.

Restore pattern

1. Back up with toRaw() so you serialize the underlying object, not the proxy.
2. Add a __type tag to objects that must become class instances, or use a custom replacer that records class names.
3. On restore, run a reviver function that walks the parsed JSON, replaces tagged objects with new ClassName(data), and resolves circular references if present.
4. Pass the rebuilt object to store.$patch() before components mount.
5. If using a community persistence plugin, implement this logic in its serialize and deserialize hooks rather than in every component.

function rehydrate(value) {
  if (Array.isArray(value)) return value.map(rehydrate);
  if (value && typeof value === 'object') {
    if (value.__type === 'User') return new User(value);
    const result = {};
    for (const [key, child] of Object.entries(value)) {
      result[key] = rehydrate(child);
    }
    return result;
  }
  return value;
}

const plain = JSON.parse(localStorage.getItem('pinia'));
const rebuilt = rehydrate(plain);
store.$patch(rebuilt);

Verification without manual conversion

• Run isReactive(store) after restore; it should return true for the store root.
• Use watchEffect(() => console.log(store.someProperty)), mutate the property, and confirm the effect logs again.
• Subscribe with store.$subscribe((mutation, state) => console.log(mutation.type)) and trigger an action; the log confirms the store still tracks mutations.
• For class methods, call store.users[0].someMethod() after restore and confirm it is a function, not undefined.

Assumptions and uncertainty

This assumes Vue 3.x and Pinia 2.x. Behavior with Pinia 1.x or custom store options may differ. Circular references require a custom serializer such as Flatted or a manual seen-set; standard JSON throws on them. I have not verified your specific store shape.

Missing diagnostic detail: Does your state contain class instances, circular references, or getters that depend on methods? If yes, plain JSON plus $patch is insufficient and you need the reviver pattern above. If your state is plain data only, toRaw(), JSON.stringify, and store.$patch() are enough.