Mutations 在 Vuex 里面就是一些用来修改数据的动作。Mutation 是个名词，意思就是 变化，转变。它的动词形式是 mutate ..

使用 mutation 要用 store 的 commit，去提交一个修改，就是 commit 一个 mutation .. 前面我们已经在 store 里定义了一个修改，叫 add ..

下面我们可以添加一个按钮组件 .. 名字是 AddButton .. 添加一个 template 设置一下组件的模板 .. 一组 button 标签 .. 按钮上的文字是 Add .. 在按钮上添加两个 class ，ui 还有 button .. 再给它绑定一个 @click 事件 .. 用 add 方法来处理这个按钮上的点击事件 ..

在组件里面再添加一个 methods 属性，它里面可以定义需要的事件处理 .. 添加一个 add .. 这个方法做的事就是去 commit 一个 add 修改 .. 用一下 this.$store 的 commit 方法 .. 提交的是 add 修改 .. 再给它添加一个 payload .. 这里我们可以使用一个随机的数字 .. Math.random() 乘以 (10 - 1) 再加上 1 ，这里的 10 是随机数字里最大的数字，1 是随机数字里最小的数字 .. 这个结果再用 Math.floor 处理一下 .. 这行代码会随机生成一个从1 到 10 之间的数字 ..

在 Counter 组件里我们用一下 AddButton 组件 .. 添加一个 components .. 说明一下要使用的组件 .. 这里添加一个 AddButton ..

然后在组件的模板里面，添加一个 add-button ..

回到浏览器 ... 可以去预览一下 .. 注意 state 下面的 count 属性的值 .. 还有 getters 里面的东西的变化 ..

点一下 Add 按钮 .. 每次点击都会往 count 数据里添加一个随机的数字 .. 这个修改我们是通过一个 mutation 做的，这个 mutation 就是在 store 里面定义的 add ..

remove

下面我们再去添加一个 Mutation .. 名字是 remove .. 接受 state 参数 .. 这个 mutation 做的修改就是把 count 里面的最后一个项目删除掉 .. 用一下 state.count 的 pop 方法 ..

再去添加一个删除按钮 .. 复制一下之前添加的 AddButton .. 然后修改一下 .. 组件的名字是 RemoveButton .. 点击按钮，用 remove 方法来处理 .. 按钮上的文字是 Remove ..

methods 里面有个 remove 方法 .. 方法做的事就是 commit 一个 remove 修改 ...

再 Counter 组件里面，添加一个 RemoveButton 组件 .. 然后在组件的模板里，再用一下这个 remove-button 组件 ..

回到浏览器 .. 点击 add 按钮 .. 会 commit 一个 add 修改 ... 注意 count 这个 state 的变化 .. 点击 remove 按钮 .. 会 commit 一个 remove 修改 .. 它会把 count 里的最后一个项目删除掉 ..