面试题：Vuex 中 mutations 与 actions 的主要区别是什么

Question

在 Vuex 状态管理模式下，阐述 mutations 与 actions 在触发方式、修改 state 数据的规则以及应用场景上的主要区别。

Answer 1

触发方式

• mutations：通过 commit 方法触发。例如：this.$store.commit('mutationName', payload)。
• actions：通过 dispatch 方法触发。例如：this.$store.dispatch('actionName', payload)。

修改 state 数据的规则

• mutations：必须是同步函数，直接修改 state 中的数据。这是因为 Vuex 利用 Vue 的响应式系统，在 mutations 中同步修改 state 才能确保状态的变化能被 Vue 准确追踪和响应。
• actions：可以包含异步操作，如 async/await、Promise 等。不直接修改 state，而是通过 commit 触发 mutations 来间接修改 state。

应用场景

• mutations：适用于处理简单的、同步的状态变化，例如切换用户登录状态、修改当前选中的菜单等。
• actions：适用于处理复杂的业务逻辑，尤其是包含异步操作的场景，如从服务器获取数据、进行表单提交并根据响应结果修改状态等。