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

itsmnthn

Manthankumar Satani

Posted on May 12, 2022

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

💖 💪 🙅 🚩
itsmnthn
Manthankumar Satani

Posted on May 12, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related