DEV Community

Cover image for Watch Pinia store getters or state in Nuxt3/Vue3 inside setup method
Manthankumar Satani
Manthankumar Satani

Posted on • Updated on

Watch Pinia store getters or state in Nuxt3/Vue3 inside setup method

<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { useSomeStore } from '~~/store/some'

const some = useSomeStore()

// This will also create refs for properties added by plugins
// but skip any action or non reactive (non ref/reactive) property
const { someGetter, someStateVar } = storeToRefs(some)

watch(someGetter, () => {
  console.log('some changed', someGetter)
})

watch(someStateVar, () => {
  console.log('some state var changed', someStateVar)
})
</script>
Enter fullscreen mode Exit fullscreen mode

Read more about using pinia store at https://pinia.vuejs.org/core-concepts/#using-the-store

Discussion (0)