Using Vue refs with Pinia

Question

I am trying to use a Pinia state store to keep an object which uses Vue refs inside it.

The object is an instance of this class (simplified example):

class Foo {
    
    constructor() {
        this.field = ref('')
    }

    setField(value) {
        this.field.value = value
    }

}

const foo = new Foo
foo.setField('bar') // all happy — no errors here

(I use those kind of objects as data records, and the fields need to be refs because they are rendered in templates and I want them reactive).

So, I define a Pinia store and set the object to it:

const useState = defineStore('main', {
  state: () => {
    return {
      foo: null
    }
  }
})

const state = useState()
state.foo = foo

Now, when I try to operate on the object having retrieved it from the store, I get:

state.foo.setField('baz') // this fails with the error

TypeError: Cannot create property 'value' on string 'bar'

What I guess happens here is that Pinia dereferences the field property on the foo object when it is accessed from the store. But heck, I do not need that! I want the foo object behave consistently no matter where it is retrieved from.

Any idea how to do that? I see Pinia has a method called skipHydrate which might be about this stuff, but I can't find how to use it.

Answer 1

Pinia uses Vue composition API internally and shares its behaviour.

As the documentation says,

The reactive conversion is "deep": it affects all nested properties. A reactive object also deeply unwraps any properties that are refs while maintaining reactivity.

It should also be noted that there is no ref unwrapping performed when the ref is accessed as an element of a reactive array or a native collection type like Map.

To avoid the deep conversion and only retain reactivity at the root level, use shallowReactive() instead.

In order to keep class instance intact, markRaw can be used:

  state: () => {
    return {
      foo: markRaw(new Foo())
    }
  }

It may be unnecessary to explicitly use composition API like ref in class implementation; instead class instance can be made reactive as is with reactive(new Foo()) with notable exceptions (explained here and here ).