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
– Greendrake, Commented Jun 7, 2022 at 12:12

Estus Flask · Accepted Answer · 2022-06-07 12:15:57Z

4

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 7, 2022 at 12:15

Estus Flask

227k80 gold badges478 silver badges621 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Greendrake Over a year ago

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

Estus Flask Over a year ago

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

Greendrake Over a year ago

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.

Collectives™ on Stack Overflow

Using Vue refs with Pinia

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related