DEV Community

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

Posted on • Edited on

6 3

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

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs