Computed does not work in nested store #2640

p0wl90 · 2024-04-05T09:04:53Z

p0wl90
Apr 5, 2024

mainStore.isNestedNumberOne is false

mainStore.isNestedNumberOne is true

I tried various things like wrapping isNestedNumberOne in computed() in the main store but I can't get it to work and it seems like a bug to me
There are two variations in the Pinia Playground that work as expected

Answered by posva

The issue is about reactivity with Vue. By doing

return {
    nestedNumber: useNested().nestedNumber,
    isNestedNumberOne: useNested().isNestedNumberOne,
    mainNumber,
    isMainNumberOne,
  };

You are reading the numbers from nestedNumber and the boolean from isNestedNumberOne. They are just values, not reactive wrappers (Ref), so they aren't reactive anymore: https://vuejs.org/guide/essentials/reactivity-fundamentals.html#limitations-of-reactive

Here is a fixed version of what you are trying to do but it duplicates the state in two stores, avoid doing that, use a computed to not duplicate the source of truth.

posva · 2024-04-09T08:11:02Z

The issue is about reactivity with Vue. By doing

return {
    nestedNumber: useNested().nestedNumber,
    isNestedNumberOne: useNested().isNestedNumberOne,
    mainNumber,
    isMainNumberOne,
  };

You are reading the numbers from nestedNumber and the boolean from isNestedNumberOne. They are just values, not reactive wrappers (Ref), so they aren't reactive anymore: https://vuejs.org/guide/essentials/reactivity-fundamentals.html#limitations-of-reactive

Here is a fixed version of what you are trying to do but it duplicates the state in two stores, avoid doing that, use a computed to not duplicate the source of truth.

0 replies