Issue with nested state change reactivity

[mudmixer-wes]

I've got a weird situation where components have pinia state props passed as a component prop to determine whether to show error messages or not.

When I call $reset I've verified the pinia state resets, but the components aren't reacting (hiding error messages). However, if I manually 'reset' the state props with errors, the components connected to the pinia state work as expected.

For example, defining a simple store like this:

export const useFormStore = defineStore('formState', {
  state: () => ({
       fields: {
         email: {
            hasError: false,
         },
       }
    }),
   actions: {
        reset(){
           this.$reset()
    }
}

And a simple child component called "FormField.vue"

<template>
   <div class="text-red" v-if='hasError'>This is required!</div>
  <input type="text" label="email"> </input>
</template>
<script setup>

const props = defineProps({
   hasError: {
     default: false,
     required: true
   }
})
</script>

And our parent component:

<template>
    <FormField :has-error="fields.email.hasError" />
   <button @click="handleReset">Reset</button>
</template>
<script setup>
import { useFormState } from '@/stores/form.store.js'

const { fields, reset } = useFormState()

function handleReset(){
   reset();
}
</script>

In this example, when the 'Reset' button gets clicked, we can console.log our this.$state object in the reset method of our store to see the state resetting correctly. However, our form component doesn't hide the error message.

However, if in our reset method, we manually do this:

this.$state.fields.email.hasError = false

It works as expected. That doesn't make sense to me given state objects are reactive, and manually changing the prop value of the state object reactively updates the component state.

Anyone run in to this?

[posva]

You lose reactivity if you destructure the store:

const { fields, reset } = useFormState()

You should just do store = useFormState() and use store.fields when needed. If you really need to extract them see https://pinia.vuejs.org/core-concepts/#Destructuring-from-a-Store

[mudmixer-wes]

@posva thanks for the follow-up. Destructuring using storeToRefs for the state fields did fix it.

What's interesting is that I did try modifying my store to be a setup store, and return state and values like so:

return {
  ...storeToRefs(state),
 someAction,
 someAction2,
}

But that didn't seem to work either. Could be a syntax issue on my side I suppose.

[posva]

It is a loss of reactivity. You can find more info in the docs of both pinia and vuejs

[mudmixer-wes]

Is there any interest on the roadmap to keep reactivity intact when you destructure your store?