Why do I need to specify deep: true in Vue watcher inside Pinia store? #2532
-
This is my sample: // App.vue
<script setup lang="ts">
import { onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { useStore } from './store.js'
const store = useStore();
const { foo } = storeToRefs(store)
onMounted(() => {
console.log('nvmnghia mounted')
setTimeout(() => foo.value.bar++, 1234)
})
</script>
<template>
<div></div>
</template> // store.js
import { ref, watch } from 'vue'
import { defineStore } from 'pinia'
export const useStore = defineStore('store', () => {
const foo = ref({ bar: 1 })
watch(foo, foo => console.log({ foo }), { deep: true })
return { foo }
}) If I remove Furthermore, if I still don't want to set foo.value = { bar: foo.value.bar + 1 } Pinia docs said I asked the same question on SO, a bit desperate today. Hope someone can help! |
Beta Was this translation helpful? Give feedback.
Answered by
posva
Jan 4, 2024
Replies: 1 comment 4 replies
-
The example you linked in the docs is talking about a |
Beta Was this translation helpful? Give feedback.
4 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
It should be an umbrella term. I recommend you to try out a bit with the playground to get a better understanding of the watchers + deep. I personally don't find it that intuitive but it makes sense for performance not to trigger deeply on refs as their value can change. In reactive objects, the value can't change, only nested properties can change, so the watcher has to be deep or it will never trigger.