Vue.js 超详细入门与项目实战（微课视频版）课件 第16章 商城动态页开发.pptx

第16章商城动态页开发;教学内容;知识目标;知识点预览;商城动态也是商城开发中的一项重要功能，动态内容可以是商品信息，也可以是促销文章，通常以列表的形式展示，点击列表中标题后查看详情页。;动态列表的展示数据，源于shop.js文件中的news属性值。

说明：数组news中的对象属性src，用于显示列表中的缩略图片，detail属性则用于显示动态列表中某项数据的详细内容，因为该数据是由后台文本编辑器创建，因此，它的内容中包含了各种HTML5元素和布局的样式。;在src/components目录下，新建一个名称为news的文件夹，该文件夹保存所有与商城动态有关的组件，目录结构如图所示。在示意图中，RtList是商城动态的列表组件，在组件中，获取列表数据，并通过遍历的方式展示在van-grid组件中。在代码中，通过van-grid组件展示列表，column-num属性设置列表只显示一列，再遍历van-grid-item组件，绑定各行中显示的数据，当点击某一行时，触发绑定的click事件函数onNavTo，在该函数中，获取并携带传入的动态Id值，跳转到动态详细页中。;在动态列表页中，当用户点击某项列表时，便携带该项列表的Id号，跳转至列表详情页，在列表详情页中，获取转入的Id号，并根据该Id号，获取对应的详情页数据，再将该数据通过绑定组件的形式，显示到页面模板中。;在示意图中，由名为RtDisplay的组件实现的功能。在代码中，先获取通过路由传入的Id号，并根据该Id号获取对应的数据记录，并将记录保存在变量curNews中，再将变量curNews中的detail属性值绑定元素，从而实现对应Id号详情的显示效果。

说明：在绑定并显示含有HTML5元素内容的数据时，需要使用v-html指令的格式，因为这种格式绑定的内容，会将绑定的内容用HTML格式解析后再输出。;在列表详情页的底部，添加了两个按钮，一个用于点赞功能，另一个用于收藏功能，两个按钮单击后的数据和状态变化，全部通过pinia状态工具进行保存。;在示意图中，由名为RtAction的组件实现详细页底部点赞和收藏的功能。在代码中，当点击“点赞”按钮时，触发pinia中定义的方法add_like_act，在该方???中，将会向数据集合中增加一条对应Id号的记录，同时，再通过retNewsLikes函数检测该条记录是否增加成功，如果成功，则改变按钮的icon图标。当击“收藏”按钮时，触发pinia中定义的方法add_collect_act，它的功能逻辑与点击“点赞”按钮基本相似，仅仅是执行了不同的方法，这两个方法都是在pinia中定义的。;为了全局性管理组件的状态和数据，本项目中安装了pinia工具，安装成功后，在src目录下创建了一个名称为store子文件夹，并在该文件夹下，创建了一个index.js的文件，用于实例化pinia对象，并缓存定义的状态变量。在代码的加粗部分中，先在state函数中，返回两个全局的状态数组变量，一个名为collects，另一个名为likes，前者用于保存收藏记录，后者用于保存点赞记录。为了能操作这两个变量，在actions对象中，定义了两个相应的方法。最后，在persist对象中，通过strategies数组配置需要缓存的状态变量，其中，数组对象中的storage属性说明缓存对象的类型，paths属性又是一个数组，数组的元素就是需要缓存的状态变量名称，如果某个变量名称不在该数组中，则该状态变量不会被缓存。