Example with Object in store

[leyenda]

Hello everyone, I am trying to use pinia, but I am having troubles with a composed getter.
The state A looks like this:

state: () => ({
    data: {} as Record<string, unknown>,
    selected: '',
    snapshot: null
  })

the action in B looks like this:

 actions: {
  bind() {
    const aStore = useAStore()
    console.log(aStore.data) // <-- this is a proxy not the value
  }
 }

With primitives and arrays it got the value, but with an object I got a proxy. Is this the intended behaviour?
How can I get the value of that object?

Thank you

[posva]

What do you mean by it being a proxy instead of the value? Do you have a repro on codepen, jsfiddle or similar I can check?

I think I understand what you mean. The object being a proxy of the original object is expected, it's part of how Vue's reactive works. You should be able to use toRaw():

import {toRaw} from 'vue'
console.log(toRaw(store.data))

[leyenda]

Thank you posva, that solves it. I was really confused, because it worked with arrays and not with objects.

[posva]

but what worked with arrays that doesn't work with objects? Do you have a small code snippet? This could be interesting to add to docs

[leyenda]

I was trying to acces from a getter to the state, for example:

state: () => ({
    data: { counter: 0, name: "Eduardo" }, // Object
    foo: [1, 2, 3], // Array
    bar: "test", // Generic
  }),
  // optional getters
  getters: {
    doubleCount() {
      console.info(this.data);
      console.info(this.foo);
      console.info(this.bar);
      return this.data.counter * 2;
    },

In this codesandbox it is working as intended.

But in my dev setup with a clean vue cli 3 project + pinia

And I had to use toRaw to finally access the state data. Now I am more confused because it works in code sandbox. 😅

[posva]

Ah I see, you don't need to use toRaw(), you can just click on [[Target]] to see the object and array

[eric-2d]

How would you go about updating an Object property ?
store.data.name = 'Edouard' won't work

Thanks

[angelhdzmultimedia]

How would you go about updating an Object property ? store.data.name = 'Edouard' won't work

Thanks

store.$patch({ data: {...store.data, name: 'Edouard'}})

I'm new to Pinia, but this is what I learned from the docs.

[eric-2d]

Thanks!