Popular posts

The potential problem with mutability is when the same piece of state could be mutated by different parts of your code over a period of time - this would make things difficult to reason about for sure. However, when you enforce a state management pattern such as Vuex (with strict mode on) on your shared state, the system essentially protects you from those scenarios by enforcing mutations to be synchronous and structured in a way that reflects the intention of the code. This achieves a similar end result of the immutable style Redux uses, both in terms of scalability and testability, while retaining the familiar state assigning syntax.

The reason Vuex sticks with a mutable style is largely tied to how Vue's reactivity system works. Dependency tracking works most efficiently when state is mutated instead of replaced by entirely new values. By using a mutable style, Vuex retains Vue's performance characteristics (accurate component update boundaries with minimal over-rendering).

An advantage the Redux has though, is that state snapshots are cheaper than Vuex's due to immutable + structure sharing by design.

There are also some nice characteristics about Redux reducers being pure functions, but (in my opinion) they don't manifest as being significantly advantageous in the majority of applications.

Using something like Immutable.js brings yet another layer of indirection and in some cases extra conversion cost between immutable wrappers and raw js values, so it's a tradeoff even for React users, and in my opinion not a good fit for Vue apps.