How to subscribe to only one value in entire state object

[SathishNaqel]

Hi,
I have defined a state as

state: () => ({
isDarkMode: false,
mainLayout: 'app',
theme: 'light',
menu: 'vertical',
layout: 'full',
rtlClass: 'ltr',
animation: '',
navbar: 'navbar-sticky',
locale: 'en',
sidebar: false,
languageList: [
{ code: 'zh', name: 'Chinese' },
{ code: 'da', name: 'Danish' },
{ code: 'en', name: 'English' },
{ code: 'fr', name: 'French' },
{ code: 'de', name: 'German' },
{ code: 'el', name: 'Greek' },
{ code: 'hu', name: 'Hungarian' },
{ code: 'it', name: 'Italian' },
{ code: 'ja', name: 'Japanese' },
{ code: 'pl', name: 'Polish' },
{ code: 'pt', name: 'Portuguese' },
{ code: 'ru', name: 'Russian' },
{ code: 'es', name: 'Spanish' },
{ code: 'sv', name: 'Swedish' },
{ code: 'tr', name: 'Turkish' },
],
isShowMainLoader: true,
semidark: false,
isAuthenticated: false,
editOppurtunityid: 0,
masterdata: Array(),
})

How can i subscribe to only isauthenticated chnages?

[hotenov]

@SathishNaqel Hi!

For now, you cannot subscribe on one property in a Store. But you can use Vue's built-in watch() function.

Look at this article by Amenallah Hsoumi.

In your case you would write something like this:

<script setup>
  import { storeToRefs } from 'pinia'
  import { watch } from 'vue'
  import { useMyStore } from './stores/user'

  const myStore = useMyStore()
  const { isAuthenticated } = storeToRefs(myStore)

  watch(
    isAuthenticated,
    () => {
        console.log('isAuthenticated ref changed, do something!')
     }
  )
</script>

If you need only watching, without rendering (not using a ref variable in template). You can omit one import and write:

<script setup>
  // import { storeToRefs } from 'pinia'
  import { watch } from 'vue'
  import { useMyStore } from './stores/user'

  const myStore = useMyStore()
  // const { isAuthenticated } = storeToRefs(myStore)

  watch(
    () => myStore.isAuthenticated,
    () => {
      console.log('myStore.isAuthenticated changed, do something!')
    }
  )
</script>

Pay attention that the first argument for watch() is an anonymous function

💡 Subscribing to actions

Another possible option for you might be a subscription on a certain action (function in Setup Stores).
See an example on the Pinia documentation website.