前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >34、vuex初探(二)

34、vuex初探(二)

作者头像
Ewall
发布2018-09-30 10:31:06
4990
发布2018-09-30 10:31:06
举报
文章被收录于专栏:vue学习

前言:上一章讲了vuex的安装及引入,这章讲下vuex中操作的几个方法DispatchCommit等,完成整个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有了一个初步的了解了,最后看看实现的效果:

本章效果展示

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.09.27 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、Dispatch
  • 2、Commit
  • 3、Mutate
  • 4、小结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档