Are separate stores created with defineStore merged together?

[metaturso]

Hello,

This is my first time using Pinia and I couldn't find an explanation for what I'm seeing in the documentation ¹. Please forgive me if this is an obvious aspect of the library and allow me to explain the problem that I'm facing.

It looks like the state held inside Pinia stores with different IDs is merged together and causing components to see the same data despite them using different stores. This happens for data returned by the state function that share the same key. Please see the example code below ².

My question is: are stores defined with defineStore merged together into one global store? If so, is there any way to keep them separate without having to give state variables unique names?

// File: stores/firstStore.ts
const useFirstStore = defineStore("firstStore", {
  state: () => ({
      available: []
  }),
});

// File: stores/secondStore.ts
const useSecondStore = defineStore("secondStore", {
  state: () => ({
      available: []
  }),
});

<!-- File: components/FirstComponent.vue -->
<script lang="ts" setup>
import firstStore from "@/stores/firstStore.ts"
const firstStore = useFirstStore();

// This mutation happens at some point of the interaction with FirstComponent
firstStore.available = ["dirty state"];
</script>

<!-- File: components/SecondComponent.vue -->
<script lang="ts" setup>
import secondStore from "@/stores/secondStore.ts"
const secondStore = useSecondStore();

console.log(secondStore.available); // Prints: ["dirty"] instead of []
</script>

Thanks for your help and advice.

Footnotes

1. I've read all docs on the official Pinia website. I've also searched this repository's issues and discussions for "conflict", "global store", "merge", "same name", "state" and couldn't find any relevant information. ↩

2. <FirstComponent> and <SecondComponent> live on different pages switched by Vue Router. ↩

[metaturso]

I couldn't replicate the problem in an isolated example. The problem must be in the application that I'm working with.

[posva]

Maybe you are pushing the same object (its reference instead of a copy) to both arrays and thus seeing it update in both arrays when you modify one:

const obj = { n: 0 }
one.array.push(obj)
two.array.push(obj)

// instead do
one.array.push({ ...obj })