Is it okay to mutate a props if it's a Pinia state?

[zhao-li]

Hi 👋

I am passing a Pinia state object from parent component to child component via props.
The child component modifies the props and triggers a mutation on the Pinia state.

Everything works until I lint the code and get flagged with this finding:

  10:27  error  Unexpected mutation of "greeting" prop      vue/no-mutating-props

I think this warning is intended for components not using Pinia as state management, but I wanted to make sure I'm not breaking any patterns either.

I've read documentation that says the child component should emit the event back up for the parent component to handle. But should that not apply since I am using Pinia?

I'm wondering, given my use of Pinia, is it okay to just ignore this linter finding?
Or is this a code smell because I have implemented a bad practice?

Thank you for your time 🙏

My code is below:
The Pinia store: src/stores/greeting.js

import { defineStore } from "pinia";

export const useGreetingStore = defineStore("greeting", {
  state: () => {
    return {
      greetings: [
        {
          id: 1,
          message: "hello, world",
        },
        {
          id: 2,
          message: "bye, world",
        },
      ],
    };
  },
  actions: {
    addGreeting(greeting) {
      this.greetings.push({
        message: greeting.value["message"],
      });
    },
    deleteGreeting(deletedGreeting) {
      const index = this.greetings.findIndex(
        (greeting) => greeting["id"] === deletedGreeting["id"]
      );
      const noGreetingWithId = -1;
      if (index != noGreetingWithId) this.greetings.splice(index, 1);
    },
  },
});

The parent component: src/components/greeting/ListGreetings.vue

<script setup>
import { useGreetingStore } from "@/stores/greeting";
import DeleteGreeting from "@/components/greeting/DeleteGreeting.vue";
import UpdateGreeting from "@/components/greeting/UpdateGreeting.vue";

const store = useGreetingStore();
const { greetings } = store;
const empty = 0;
</script>

<template>
  <h2>Greetings:</h2>
  <ul v-if="greetings.length !== empty">
    <li v-for="greeting in greetings" :key="greeting['id']">
      {{ greeting["message"] }}
      <UpdateGreeting :greeting="greeting" />
      <DeleteGreeting :greeting="greeting" />
    </li>
  </ul>
  <p v-else>No greetings available.</p>
</template>

The child component: src/components/greeting/UpdateGreeting.vue

<script setup>
//import { ref } from "vue"; // this satisfies the linter finding, but breaks the functionality

const props = defineProps({
  greeting: Object,
});
//const message = ref(props.greeting["message"]); // this satisfies the linter finding, but breaks the functionality
</script>

<template>
  <input v-model="greeting['message']" />  <!-- this is the prop getting modified -->
  <!--input v-model="message" /> this satisfies the linter finding, but breaks the functionality -->
</template>

[posva]

no, you still shouldn't modify a prop because the idea behind a prop is that you don't know where it comes from. You either emit events and use v-model on the prop or use the store within the component and couple it to the store. Note the last version prevents you from using the component without the store and it's less flexible.

[zhao-li]

Thanks @posva.

That makes sense.

I'm going to try and rephrase what I understand and please help confirm if I am understanding what you said or if I might have missed some detail:

1. parent component passes store state as prop to child component
2. child component uses prop (not knowing it's a store state) as initial value
3. when child component decides to modify the value, child component emits event to parent component
4. parent component receives emitted event and calls state action
   • this implies that the parent component is couple to the store while the child component is not couple to the store
   • though the child component can be considered couple to the parent component (which might be okay?)

Are there any details that I misunderstood?

Thank you again for guiding and explaining all of this VueJS stuff to me. 🙏

PS:
If I were to extrapolate this to 2 sibling components working on the same store state...
both sibling components would just be childless parent components that need to be couple with the store and call the state action separately. I think this is the second option you mentioned?:

use the store within the component and couple it to the store. Note the last version prevents you from using the component without the store and it's less flexible

Would that be correct?

[posva]

parent component receives emitted event and calls state action

yes or just use v-model:prop="store.stateValue"

though the child component can be considered couple to the parent component (which might be okay?)

no, it's not coupled

[zhao-li]

@posva thank you so much for all of your help and guidance 🙏

I've refactored the code to be more "data down, actions up" and posting here in case you have time and can spot anything that jumps out at you that I might have been able to do better, e.g. bad practice, code smell, etc.

And in case the code can help other newbies starting out...

Thank you again for your time. Take care 🌈

The Pinia store: src/stores/greeting.js

import { defineStore } from "pinia";

export const useGreetingStore = defineStore("greeting", {
  state: () => {
    return {
      greetings: [
        {
          id: 1,
          message: "hello, world",
        },
        {
          id: 2,
          message: "bye, world",
        },
      ],
    };
  },
  actions: {
    addGreeting(greeting) {
      this.greetings.push({
        message: greeting.value["message"],
      });
    },
    deleteGreeting(deletedGreetingId) {
      const index = this.greetings.findIndex(
        (greeting) => greeting["id"] === deletedGreetingId
      );
      const noGreetingWithId = -1;
      if (index != noGreetingWithId) this.greetings.splice(index, 1);
    },
  },
});

The parent component: src/components/greeting/ListGreetings.vue

<script setup>
import { useGreetingStore } from "@/stores/greeting";
import DeleteGreeting from "@/components/greeting/DeleteGreeting.vue";
import UpdateGreeting from "@/components/greeting/UpdateGreeting.vue";

const store = useGreetingStore();
const { deleteGreeting, greetings } = store;
const empty = 0;
</script>

<template>
  <h2>Greetings:</h2>
  <ul v-if="greetings.length !== empty">
    <li v-for="greeting in greetings" :key="greeting['id']">
      {{ greeting["message"] }}
      <UpdateGreeting v-model="greeting['message']" />
      <DeleteGreeting :id="greeting['id']" @update:id="deleteGreeting" />
    </li>
  </ul>
  <p v-else>No greetings available.</p>
</template>

The child component: src/components/greeting/UpdateGreeting.vue

<script setup>
defineProps({
  modelValue: {
    type: String,
    required: true,
  },
});
defineEmits(["update:modelValue"]);
</script>

<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>