Why does Pinia state mutate when using getters? - vue.js

Question

I would expect that when calling a getter from the store and assigning it to a variable, any changes to that variable would not result in the store state being updated, as I'm not calling the state directly.
This is true for primitive data, but not for object references.
<script setup>
import { ref } from 'vue'
import { useStudyStore } from '#/study/studyStore'
const StudyStore = useStudyStore()
let string = ref(StudyStore.getString)
string.value = 'bar2' // Does NOT update store
let object = ref(StudyStore.getObject)
object.value.a = 2 // DOES update store
const simpleArray = ref(StudyStore.getSimpleArray)
simpleArray.value[0] = 5 // DOES update store
</script>
// Store
export const useStudyStore = defineStore('study', {
state: () => ({
string: 'bar',
object: { a: 1 },
simpleArray: [1, 2, 3, 4],
}),
getters: {
getString(state) {
return state.string
},
getObject(state) {
return state.object
},
getSimpleArray(state) {
return state.simpleArray
},
},
})
I understand that this is due to how referencing works in Javascript, but I expected Pinia to handle this in some way to prevent accidental updating of the store. Is it really the case that any time we want to protect a non-primitive state value in the store from being mutated we need to parse/stringify them?
const copy = JSON.parse(JSON.stringify(StudyStore.getSimpleArray))

Answer 1

This is caused by the simpleArray being deeply reactive
Generally, you'd expect that everything in store is deeply reactive
If you want to explicitly remove reactivity, use
// the object will be non-reactive, you'll have to `store.simpleArray = store.simpleArray` to update it
simpleArray: markRaw([1, 2, 3, 4])
// the returned value would be non-reactive, but would stealthy change reactive object
getSimpleArray() {
return toRaw(this.simpleArray)
}
// will disallow changes on TS level
getSimpleArray() {
return this.simpleArray as DeepReadonly<typeof this.this.simpleArray>
}
// will disallow changes on proxy level
getSimpleArray() {
return deepReadonly(this.simpleArray)
}
(readonlys may be not is #vue but in #vueuse/core or whatever)
why deeply reactive, say you have deep options
options: Record<someId, { colorOfSomeId: string }>
obviously expected to be deep reactive