在前面中我们讲解了关于Vuex的来历和运转流程,今天我们再来看一下Vuex中Mutation, 首先我们需要了解一个知识点 我们一般怎样修改 State 中的数据,是直接修改吗?
答案是可以的,但是为什么大家都没有见过有人这样子做呢? 这是因为这种方法会导致修改来源不明确的问题,不利于调试和后期的维护。因此Vuex 官方也禁止我们直接修改!
那么我们改如何修改我们的数据呢?,其实官方早就替我们想好了,其实就是我们今天要讲的Mutation来修改数据 那么我们先要了解Mutation是什么东西.Mutation 本质上是 JavaScript 函数,专门用来变更 Store 中的数据。而且他那够确保能够确保修改来源的唯一性,方便调试和后期维护。
其中:State、组件、Mutation 之间的关系就如下图所示
而Mutation的使用方法也很简单
我们首先只需要在 Vuex 中定义 Mutation 方法,然后在我们的组件中调用他就可以了 this.$store.commit(‘方法名’) 不过如果在我们使用过程中遇到需要多个参数的话我们该怎么办呢?
这个时候我们就引进了一个新的方法载荷(Payload),而在Vuex 中的载荷就是参数的意思,通过载荷可以提高 Mutation 方法的通用性。
在组件中,可以通过 this.$store.commit() 方法的第二个参数来提交载荷(参数)
当然Vuex 还提供了一种辅助函数叫mapMutations 辅助函数,可以方便的把 Store 中指定的方法,映射为当前组件的 methods.
我们只需要按照下面的方法来使用就可以了