Vuex mutate object best practices - vue.js

Question

I'm developing a module that enables users to place remarks on an object. I use a Vuex store and a component to visualize the remarks. I've pasted the code below.
Thing is I bind the text area that displays the remark body to a v-model that is the property body of the remark object. Since I return the array of remarks from the store with the getremarks getter any changes to the remark object properties are directly changed in the store as well since it is the same object that gets passed around. I thereby effectively bypass the entire action/mutation pattern Vuex wants me to implement.
I can always pass the mutated remark to an action and mutation in the store but that means I'm mutating an object that is allready mutated. I was wondering if there are any best practices around?
Store
import Vue from 'vue'
const model = {
state: {
remarks: [],
},
mutations: {
SET_REMARKS(state, remarks) {
state.remarks = remarks;
}
},
getters: {
getRemarks(state) {
return state.remarks;
},
getRemarkById: (state) => (id) => {
return state.remarks.find(remark => remark.model_remark_id === id);
}
},
actions: {
}
}
export default model;
Component
<template>
<v-list two-line expand>
<v-list-group v-for="remark in remarks" :key="remark.model_remark_id">
<template v-slot:activator>
<v-list-item-icon>
<v-icon v-text="icon" :color="remark.priority === 1 ? 'red' : remark.priority === 2 ? 'orange' : '#1478c7'" />
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title><b>{{ remark.created_by_user.name }}</b></v-list-item-title>
<v-list-item-subtitle>Created at {{ moment(remark.created_at).format('DD-MM-YYYY HH:ss:mm') }}</v-list-item-subtitle>
</v-list-item-content>
</template>
<v-list-item>
<v-list-item-icon>
</v-list-item-icon>
<v-list-item-content>
<v-row>
<v-col>
<v-textarea
class="mx-2"
v-model="remark.body"
auto-grow
/>
</v-col>
</v-row>
<v-row>
<v-col align="right">
<v-btn
color="primary"
elevation="2"
#click="remarkDone(remark)"
>Done</v-btn>
<v-btn
color="primary"
elevation="2"
#click="remarkUpdate(remark)"
>Update</v-btn>
</v-col>
</v-row>
</v-list-item-content>
</v-list-item>
</v-list-group>
</v-list>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
data: () => ({
icon: "mdi-comment"
}),
computed: {
remarks: function () {
return this.getRemarks();
},
},
methods: {
...mapGetters([
"getRemarks",
"getRemarkById"
]),
remarkUpdate(remark) {
console.log(remark);
const x = this.getRemarkById()(remark.model_remark_id);
console.log(x);
}
},
};
</script>

Answer 1

I think the key principle to keep in mind here is separation of concerns. Let Vuex handle all mutations of the state and let your Vue component simply fetch the remarks from the state. The state is reactive, so if you call a mutation from your component to change your remarks, you want the component to simply react to that change and render the updated markup.
Also, you should use mapGetters to map your getters to computed properties, not methods. I'm also not sure if you need getRemarkById getter in updateRemark() since you already have the remark as an argument.
export default {
computed: {
...mapGetters({ remarks: 'getRemarks' })
},
methods: {
updateRemark(remark) {
// here you should commit a mutation to update your remark
this.$store.commit('updateRemark', remark)
}
}
}