先做个简单的练习 ..

在应用的脚本里面，创建一个 store .. const store .. 等于 new Vuex.Store .. 给它一个对象 .. 里面添加一个 state ，它里面的东西就是应用需要的数据 ..

比如添加一个 count ，先让它的值等于 0 ..

然后再添加一个 mutations .. 这里的东西就是一些修改数据用的操作 .. 比如添加一个 add .. mutation 里的方法的第一个参数就是 state ，表示应用里的数据 .. 在它里面，让这个 state 里的 count 加上 1 ..

再到浏览器上去试一下 .. 打开浏览器的开发者工具 .. 调整一下这个开发者工具的显示的位置 ... 让它在屏幕的右侧显示 ..

在浏览器上我们可以安装一下 vue.js 的开发工具 .. 这样在浏览器的开发者工具这里，就会多出一个 vue 选项卡 .. 打开它 ..

然后选择 Vuex

这里会显示应用的一个 Base State .. 选中它，在右边你会看到应用里的 state 的值 .. 这里只有一个 count，现在它的值是 0 ..

再调出控制台 .. 按一下 ESC .. 看一下 store 里的 state .. 访问一下 count .. 返回的值是 0 ..

commit

现在我们假设应用需要修改这个 count 的值，我们不能直接去设置它的值，这里要去 commit 一个 mutation .. 用一下 store 的 commit 方法，把 muation 的名字告诉这个方法 .. 这里用一下我们刚才在 store 里添加的 add ..

在 vue 的开发者工具上面，会显示一个 add .. 我们可以再 commit 一下这个 add mutation ..

又会出现一个 add .. 点击这个 add 可以检查一下这个操作 .. 你会发现，state 里的 count 是 1 .. 应用的 mutation 是 add ..

再选中下面这个 add .. 检查一下 .. commit 这个 add 以后，state 里的 count 的值是 2 .. 应用的 mutation 是 add ..

payload

在 commit 的时候，可以再传递一个 payload，就是带的数据 .. 定义 mutation 的时候，第一个参数是 state，第二个参数就是 payload .. 这个名字你可以随便怎么去定义它 ..

再改造一下这个方法 .. state.count = state.count + payload ..

回到浏览器 .. 这回我们再 commit 一下 add .. 再指定一下 payload .. 比如 3 ..

你会看到现在 state 里的 count 的值，就会是 3 .. 在应用的 Base State 里面， count 的值是 0 .. commit 了一下 add 这个 mutation ，带着数字 3 ， 这样 count 的值就变成了 3 ..