前言:上一章讲了vuex的安装及引入,这章讲下vuex中操作的几个方法Dispatch、Commit等,完成整个vuex操作的小循环。
GitHub:https://github.com/Ewall1106/mall(选择分支chapter34)
我再贴一下这张图,我们按照这个顺序讲解:
截图来自vuex官网
1、Dispatch
首先我们讲在组件中分发 Action
,使用的是dispatch
这个方法。也就是说如果你想在组件中改变vuex
仓库的值,可以使用这个方法。
(1)首先我们再新建一个testCity.vue
的文件并与test.vue
形成互为父子页面,作为我们这几章vuex初探的案例测试页面。
新建testCity页面
(2)然后我们在testCity
页面中用dispatch
方法分发action
先简单布局一下(选择列表+提交按钮)
添加一个点击事件,当点击提交的时候将选择的值作为
dispatch
的参数
dispatch分发action
基本布局样式
(3)ok,接下来我们就应该是在store仓库中注册actions
注册`actions`
2、Commit
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用
context.commit
提交一个 mutation。
(1)接着上面的来,我们在changeCity
事件中提交一个mutation
第一个参数是
context
对象;第二个参数是接收组件
dispatch
传过来的city
值
commit提交mutation
这样,我们就提交了一个mutation。
3、Mutate
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
终于,到了这一步我们就可以进行state
状态的变更了(这一步就是可以改变state的值)
我们先注册一个
mutations
;新建
commit
提交的事件,第一个参数为state
,第二个为commit
传过来的city
值:
修改state中的值
4、小结
最后,当你改变了state
的值以后,vue就会自动render
重新渲染组件视图,从而完成开篇图1234步骤中的整个小循环。
这样,本章我们就对vuex有了一个初步的了解了,最后看看实现的效果:
本章效果展示
作者:Ewall_
链接:https://www.jianshu.com/p/09521d1acfa4