The Problem
When I dispatch a function from a Pinia store that has a for loop inside that fills an array, the array ends up having double the size according to Chrome and the Vue Chrome extension.
Detailed explanation
I use Nuxt with Pinia. When I dispatch a function with Pinia where I fill an array with a for loop, it has double the size and entries in the Vue extension and in the Chrome log itself. Since Nuxt logs console.log directly in the terminal, I tried to log the size of the array and in the terminal it says 10 but in Chrome it says 20. That makes no sense. I've never see such a weird behavior before.
Heres the code and the logs
TestStore.ts
import { defineStore } from "pinia";
export const useTestStore = defineStore("testStore", {
state: () => {
return {
test_array: [] as number[]
};
},
actions: {
test() {
for(let i = 0; i < 10; i++) {
this.test_array.push(i)
}
console.log(this.test_array.length);
}
}
})
app.vue
<script setup lang="ts">
import { useTestStore } from "@/stores/TestStore";
const teststore = useTestStore();
teststore.test();
</script>
Array in Chrome before the first loop:
[0,1,2,3,4,5,6,7,8,9]
Array in Chrome after the first loop:
[0,1,2,3,4,5,6,7,8,9,0]
Array after the for loop:
[0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9]
console.log(this.test_array.length) in the Nuxt terminal:
10
console.log(this.test_array.length) in Chrome:
20
Chrome log:
Edit: I realized every time I press CTRL+S and it hot reloads, it fills the array with another 10 digits. Log after 20 saves:
Edit 2: The issue with it filling it on every save disappeared for now. This whole bug is so confusing...
Nuxt terminal log:
Edit 3: I kinda have an error now. When I took a closer look it appeared to me that the console log in the terminal was always quicker. So it would log what you can see above in the terminal and then the website would reload and show the array times two. So it seems like it already has data in that array even before the reload:
