How can/Should I prevent actions from mutating the state in vuex? - vue.js

Question

We should update the state in mutations and these mutations can be called inside actions. That's OK. But, look at the example below:
actions: {
markMessageAsRead({ state, commit }, payload) {
const messageId = payload.messageId
const messages = state.messages[payload.chatId]
const message = messages[messageId]
message.status = 'read' // <---- THIS ALREADY MUTATES THE STATE!
commit('UPDATE_MESSAGE', { messageId, message }) // <---- BEFORE THIS
},
}
In the above example, before the commit(...) line, the message is getting updated already, because of the message.status = 'read' line.
So, to prevent mutating state in actions, should I always copy an object from the state before changing its props? Is there anything I'm wrong? What's the correct way to get something from state and update it? Hope I explained it well.

Answer 1

If you are updating the payload in action to make your mutations more reusable, then the reusability of a single mutation instead of a more targeted one (SET_STATUS for ex.) does not justify the complexity added by cloning the state before mutating it (look at the code below, it is more clean and simple).
For me, it is a more maintainable and scalable approach to have more targeted mutations, updating only a single prop (when the only purpose is to update a single prop), because this avoid the unnecessary need to always account for every change made to store state as long as the targeted property exists on object.
Thus, in your situation, since your action is called with the only purpose to mark the message as read, I would make a SET_STATUS mutation, and avoid any other manipulations of the state outside mutation.
mutations: {
SET_STATUS(state, {messageId, chatId, status){
state.messages[chatId][messageId].status = status
}
}
actions: {
markMessageAsRead({ state, commit }, payload) {
commit('SET_STATUS', { messageId: payload.messageId, chatId: payload.chatId, status: 'read' })
},
}