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.

@EstusFlask Initially yes it is `null`, but then I do `state.foo = foo`. It is no longer `null` after that, in fact `state.foo instanceof Foo` returns `true`. — Greendrake, Jun 07 '22 at 12:12

score 1 · Accepted Answer · answered Jun 07 '22 at 12:15

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).

answered Jun 07 '22 at 12:15

Estus Flask

206,104
70
425
565

+1 for `markRaw`, will try that. Not sure about using `reactive(new Foo())` as the real `Foo` also uses `computed`, `watch` etc. in its constructor. – Greendrake Jun 07 '22 at 12:21
@Greendrake Then it probably doesn't need to be a class at all because it won't benefit from oop that much, composition is fp-oriented. `reactive` is for classes that weren't specifically designed as reactive. – Estus Flask Jun 07 '22 at 12:31
`Foo` represents a data record. It does extend another class which provides stuff like triggering and listening to events (and, potentially, persistence in remote store etc.). So, there _is_ a good use of OOP here. Not sure why composition necessarily needs to be deemed fp-oriented if it works with OOP just fine. – Greendrake Jun 07 '22 at 12:39

Using Vue refs with Pinia

1 Answers1