The pinia state value changes while the muted props value changes

In my application, i used pinia store and event emit implementation to mutate props value from child component to parent component, but now both values are reactive. while I change my value from the parent component the child component data (pinia store value) also changes.

Steps to reproduce the bug
Provide the value from the store to the child component, and implement the event emits functionality to change the props (values from the parent) value to the store values (assign state value to props). Change the prop value in the parent component, and the store state value in the child component will be updated.

Code

//Parent component
     <ChildComponent :values="computedValue" @setValue="(value)=> computedValue = value"/>

//Child component 
const store = servicesStore()
const value = store.getValue
<button @click="$emit('setValue', value)">

// Store
export const servicesStore = defineStore('services', {
    state: () => ({ 
        value: []
    }),
    getters: {
      getValue: (state) => { 
            return state.value
      }
    },
    actions: {
        async fetchvalue() {
            try {
                const response = await axios.get(API_URL + '/value');
                this.value = response.data;
              } catch (error) {
                console.error('Error fetching data:', error);
              }
        }
    },
})
//Note: fetchvalue() function will trigger when mounting the App.vue component

  • 1

    Please edit your question to provide a minimal reproducible example.

    – 




  • @brc-dd edited the question Thanks:)

    – 

  • @suneeth A reproducible example means that you need to provide code that reproduces the problem.

    – 

  • @EstusFlask question updated with code , Thanks

    – 

A temporary solution has been found. In order to fix this issue, I stringified the store value and parsed the value using JSON.stringify and JSON.parse methods. This will disable the reactivity of pinia store values.

Leave a Comment