在 Vue.js 应用程序中，对组件间共享的状态进行管理是一个很大的问题，经常需要使用传递 props 属性和事件的方式进行沟通，甚至还要在祖先和子孙组件之间传递，而一旦某个组件的状态被其他组件修改，这个状态就必须重新更新到其他组件的 Props 中。这样会使得代码非常冗长且难以维护，于是 Vuex 应运而生。
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用了集中式存储管理方式，在应用程序中的所有组件中使用同一个状态。通过在应用程序的整个生命周期内使用 Store 实例，可以轻松地管理状态，并在应用程序不同组件之间共享状态。
在 Vuex 中，状态的改变必须通过提交 mutation 来进行。Mutation 是一种简单的同步操作，它包含了一个 string 类型的名字和一个 function 类型的 payload。这个 payload 是提交 mutation 时所需要的新状态，mutation 的函数用于修改 state 数据。
Mutation 还有更多的作用，其中一个重要的作用是保证 Vuex 中 state 的唯一性。一个 Vuex 应用程序很容易就会因为多个组件之间同时修改了同一个状态而造成冲突，而只要所有的改变都是通过提交 Mutation 来进行，就可以保证 Vuex 中状态的唯一性，以避免了多个组件之间 state 数据的冲突。
一下是一个简单的关于 Vuex 的 mutation 使用示例：
-- -------------------- ---- ------- -- ---- ---------- -- ------ --- ---- ------ ------ ---- ---- ------- -------------- -- --- ------------ ----- ----- - --- ------------ ------ - ------ - -- ---------- - -- -- -------- --------- ----- --- ------ ------ ---------------- - -------------- -- --------- ------- - -------------- - - --- -- - --- -------- ----- ---- -------- ----- -- - --- ----- --- ------- ------ -- ------- ----- ------------------- --------- - ----- ------ ----- ------- ------- ------------------------------------- ------- ------------------------------------- ------ -- --------- - ------- - ------ ------------------------ - -- -------- - --------- -- - -------------------------------- -- --------- -- - -------------------------------- - - ---展开代码
Mutation 也支持带参数的情况，如下所示:
-- -------------------- ---- ------- ----- ----- - --- ------------ ------ - ------ - -- ---------- - -- -------- -------- ------- --- ----- ----- ---------------- -- - ----------- -- -- -- - --- -- ---- --- -- --- ----- --- ------- ------ --------- - ----- ------ ----- ------- ------- ------------------------------- -- ---------- ------ -- --------- - ------- - ------ ------------------------ - -- -------- - -- -- --------- ------- ------- ------ - ------------ - ------------------------------- --- -- - ---展开代码
Mutation 作为状态管理中心的核心模块，它在 Vuex 中的作用是十分重要的。遵循 Mutation 函数的规范并使用它，有助于更好地管理应用程序状态，避免状态数据冲突和维护困难的情况。这对于前端开发者来说，是非常有指导意义的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b825a1306f20b3a65af3e5
