美文网首页猫码vueVue.js专区
38、vuex管理用户地址

38、vuex管理用户地址

作者: ComfyUI | 来源:发表于2018-10-13 15:01 被阅读238次

前言:前面几章我们学习了一下vuex,学习总归是要学以致用,还是回到地址列表中,在第32章中我们使用的是localstorage来实现这方面的功能,但是效果很不好,所以本章我们用vuex来管理我们用户填写的地址。
GitHub:https://github.com/Ewall1106/mall

1、提交地址数据

(1)通过上一章vuex初探(五)的学习,我们知道在组件中可以直接commit提交mutations

(2)所以我们在用户点击save事件的时候,将数据作为参数提交mutation

用户点击`save`事件

2、vuex仓库

(1)上文中在地址编辑页面提交了一个mutation,然后我们回到store文件夹中,首先应该定义一下state数据,这里我们的地址应该是一个数组。

`store`文件夹

(2)然后在mutations.js文件中,将用户commit提交的参数赋给这个address数组

`commit`提交.png

3、获取state

(1)然后我们就可以去地址列表页面获取address数据
(2)至于forEach函数无非是由于组件需要一个id用于设置默认勾选,所以遍历一下。

获取`address数据`

这样,我们就在我们的商场项目中用vuex管理了用户的地址。

4、小结

然后完善一下编辑和删除的功能,我们的地址选择就完成了。

相关文章

  • 38、vuex管理用户地址

    前言:前面几章我们学习了一下vuex,学习总归是要学以致用,还是回到地址列表中,在第32章中我们使用的是local...

  • 一文轻松搞懂Vuex

    概念: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式(官网地址:https://vuex.vue...

  • 30、一篇文章带你真正了解Vuex,搞定Vuex

    概念: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式(官网地址:https://vuex.vue...

  • lesson 10 | Advance user interfa

    地址链接:https://hackdesign.org/lessons/38 动画&反馈 用户进行相应操作后用户界...

  • vuex

    vuex vuex是状态管理模式。 回顾下组件间的通信 需求:比如在我们的博客中,每个组件中都需要用户的登录状态以...

  • vuex的安装和使用

    先给出官网地址[https://vuex.vuejs.org/zh/] 一、什么是vuex 官方解释: Vuex ...

  • 用户注册

    用户的注册 用户登录 用户个人信息管理 用户地址管理 用户收藏管理 我的订单 优惠券管理 其中短信微服务抽取出来 ...

  • vuex

    Vuex介绍: Vuex官网:http://vuex.vuejs.org/ Vuex是实现数据状态管理的技...

  • 36.vuex的使用笔记

    vuex官网地址:https://vuex.vuejs.org/zh/guide/mutations.html

  • Vuex状态管理模式

    Vuex是什么? Vuex是一个专为Vue.js应用程序开发的状态管理模式Vuex是全局的状态管理 Vuex用来做...

网友评论

本文标题:38、vuex管理用户地址

本文链接:https://www.haomeiwen.com/subject/olpoaftx.html