Script setup syntax and pinia reactivity

[brandonburkett]

When using <script setup syntax, it was not clear to me (from the docs) how reactivity would behave when importing and using only one or two properties from the store.

For example:

<template>
  <button @click="checkMyStore"></button>
</template>
<script setup>
import { useMyStore } from '@/stores/my-store'

const myStore = useMyStore()

function checkMyStore() {
  if (myStore.someProp) {
    // do stuff
  }
}
</script>

In the above example, would a change to any property within the store, say useMyStore.anotherProp cause the above example to re-render, even though it is only using at useMyStore.someProp?

Is it better to use const { someProp } = storeToRefs(useMyStore) in this case? OR simply because useMyStore is a const within <script setup, it will be part of the returned data from the setup() function and still re-render if anything at all changes with any properties within myStore.

[posva]

In the above example, would a change to any property within the store, say useMyStore.anotherProp cause the above example to re-render, even though it is only using at useMyStore.someProp?

No. The idea in Vue is not to worry about when things render, just let Vue handle that for you.

Is it better to use const { someProp } = storeToRefs(useMyStore) in this case?

Both are fine, use storeToRefs() when having an individual value is more convenient or when you need to pass a piece of state to a Composable

[brandonburkett]

Thank you! I tested this morning and verified that onBeforeUpdate and onUpdated lifecycle events fired only for store mutations to properties used in the template, and not for any non-template store mutations, which is great!