7、vuex初探（二）

我再贴一下这张图，我们按照这个顺序讲解：

1、Dispatch

首先我们讲在组件中分发 Action，使用的是dispatch这个方法。也就是说如果你想在组件中改变vuex仓库的值，可以使用这个方法。

（1）首先我们再新建一个testCity.vue的文件并与test.vue形成互为父子页面，作为我们这几章vuex初探的案例测试页面。

（2）然后我们在testCity页面中用dispatch方法分发action

• 先简单布局一下（选择列表+提交按钮）
• 添加一个点击事件，当点击提交的时候将选择的值作为dispatch的参数

（3）ok，接下来我们就应该是在store仓库中注册actions

2、Commit

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用context.commit提交一个 mutation。

（1）接着上面的来，我们在changeCity事件中提交一个mutation

• 第一个参数是context对象；
• 第二个参数是接收组件dispatch传过来的city值

这样，我们就提交了一个mutation。

3、Mutate

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

终于，到了这一步我们就可以进行state状态的变更了（这一步就是可以改变state的值）

• 我们先注册一个mutations；
• 新建commit提交的事件，第一个参数为state，第二个为commit传过来的city值：

4、小结

最后，当你改变了state的值以后，vue就会自动render重新渲染组件视图，从而完成开篇图1234步骤中的整个小循环。
这样，本章我们就对vuex有了一个初步的了解了，最后看看实现的效果：