38、vuex管理用户地址

前言:前面几章我们学习了一下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、小结

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员互动联盟

【专业技术】如何在Linux中添加新的系统调用

系统调用是应用程序和操作系统内核之间的功能接口。其主要目的是使得用户可以使用操作系统提供的有关设备管理、输入/输入系统、文件系统和进程控制、通信以及存储管理等方...

2624
来自专栏源哥的专栏

客户端数据集/服务端数据集的原理和设计

最近在开发一个比较大型的项目,主要采用Activex控件做底层操作,采用Javascript做逻辑控制和处理,采用Ajax实现服务端与客户端之间的交互,而在实际...

884
来自专栏西枫里博客

使用IP138读取用户端地址写入数据库函数

最近突然发现本...

962
来自专栏木可大大

Linux监控指令

说到监控CPU,目前主要是监控CPU的使用率,以及每一个进程占用CPU资源,Linux系统中主要使用 top、vmstat、pstree 三个命令。

1793
来自专栏云计算教程系列

如何在Ubuntu 14.04上使用Cassandra运行多节点群集数据库

Apache Cassandra是一个高度可扩展的开源数据库系统,在多节点设置上实现了出色的性能。

1452
来自专栏编程

python接口测试之token&session处理

在做接口的自动化测试中,无法绕过cookie,某些时候我们需要处理,那么怎么处理?另外一个方面,什么是cookie?cookie它的工作机制是用户识别以及状态管...

3265
来自专栏蓝天

mooon调度器设计的考量因素

2、支持业务独占进程,这是保证高可用性的前提,也是解业务与业务间,和业务和平台间耦合的前提

872
来自专栏MYSQL轻松学

你了解的max_allowed_packet

Error updating database. Cause: com.mysql.jdbc.MysqlDataTruncation: Data trun...

5767
来自专栏Vamei实验室

来玩Play框架01 简介

说到网络框架,Ruby的Ruby on Rail和Python的Django都相当轻巧好用,但Java下的框架,则要沉重很多。有人因此质疑Java语言本身是否符...

2367
来自专栏zhisheng

PHP 系列:PHP Web 开发基础

PHP是动态类型的Web开发的脚本语言,PHP以页面文件作为加载和运行的单元,PHP现在有了Composer作为开发包管理。 1.使用Composer管理依赖 ...

4185

扫码关注云+社区

领取腾讯云代金券