Vue电商项目--vuex模块开发

news2024/9/22 13:45:07

vuex状态管理库

vuex是什么?

vuex是官方提供的一个插件,状态管理库,集中式管理项目中组件共有的数据。

切记,并不是全部的项目都需要Vuex,如果项目很小,完全不需要vuex,如果项目很大,组件很多,数据很多,数据维护很差,就可以使用vuex

npm i vuex@3.6.2

先安装一下vuex

在src文件夹下,新建一个目录为store

然后对外暴露这个store对象,已经对应的办法

在main.js中去注册这个仓库,就可以去使用vuex了

如果项目过大,组件过多,接口多,可以让vuex实现模块化开发

就是将大仓库变成小仓库

小仓库,合并到大仓库

 

动态展示三级联动数据 

就是这块数据都是写死的,而我们是要真正获取数据来渲染到页面上

组件挂载完毕:可以向服务器发起请求

通知Vuex发请求,获取数据,存储在仓库中

然后就到我们的仓库中,写代码

 

它返回的是一个Promise对象,然后我们就解构出commit.这里一定要注意形参是{commit},否则会报以下错误

 

这样就能拿到数据了

然后注入到页面 

 观察结构,然后渲染到页面

干掉其他,只由下一个,然后v-for遍历数组

 

三级联动数据展示到页面上。完成 

完成一级分类动态添加背景颜色

就是做一个鼠标移动一级分类,显示对应的颜色

第一种解决方案:采用样式完成

 当然能实现

第二种解决方案:通过js完成

首先我们定义一个函数,使用@mouseenter鼠标移入触发changeIndex方法,传入索引值。然后就可以用响应式数组来存储了

 然后通过动态索引的方式,给他添加cur类,也能实现

 现在我们需要鼠标移动这个nav部分,也让它不消失。通过事件的委派完成

 就是用一个大盒子,然后把鼠标移除写在大的div上 

通过Js控制二三级商品分类的显示与隐藏

最开始的时候,是通过css样式display:block|none显示与隐藏二三级商品分类

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/480263.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

一道Python初学者常犯错误解析

1. 引言 在Python学习中,经常会遇到各种各样的代码错误,尤其对于初学者而言,明明觉得逻辑上是对的,但是代码运行起来,往往不是自己想要的结果。 本文就最近在某平台看到的一个常见错误进行展开,帮助大家更…

06 虚拟化Open vSwitch环境部署

文章目录 06 虚拟化Open vSwitch环境部署6.1 安装Open vSwitch网桥6.1.1 安装Open vSwitch组件6.1.1.1 安装Open vSwitch组件6.1.1.2 启动Open vSwitch服务6.1.1.3 设置Open vSwitch服务随系统自动启动 6.1.2 确认安装是否成功6.1.2.1确认 Open vSwitch组件是否安装成功6.1.2.2…

kill 信号

kill -0 PidNum 参数是0,不会发送任何的信号,不会关闭程序,但会执行错误检查,对程序运行状态进行监控。可以用他来检测某个进程ID或进程组ID是否存在。从理解上看,作用相当于ps -p 。 进程已停止、不存在或其他异…

前端小白是如何利用chatgt用一周时间从做一款微信小程序的

前端小白是如何利用chatgt用一周时间从0做一款微信小程序的 随着chatgpt的大火,真的是在工作上给各行各业的人带来了极大的便利,本人是一个java程序员,其实我自己是一直想开发一款属于自己的小程序的,但是迫于对前端知识的贫瘠&a…

【五一创作】VimPlug插件配置

目录 Install Question Q1:字体乱码 Q2:插件配置 Q3:安装扩展插件 Q4:查看安装插件状态 Q5:查看默认插件 Q6:卸载插件 Q7:增加用户配置 Install Github地址:GitHub - chxu…

内网渗透之横向移动NTMLRelay(中继)攻击-InveighNTLM-Relay重放

横向移动 NTLM中继攻击 Relay重放(smb) 适用于无法获取hash或密码时使用 NTML Relay重放包括smb to relay ldap ews webserver: 执行下面的命令时会默认以当前用户名和密码去登录目标计算机 dir \\ 192.168.3.32\c$webserver切换到本地的administrator时 dir \\ 192.168.3.3…

权限提升:令牌窃取 || 进程注入.

权限提升:令牌窃取 || 进程注入. 权限提升简称提权,由于操作系统都是多用户操作系统,用户之间都有权限控制,比如通过 Web 漏洞拿到的是 Web 进程的权限,往往 Web 服务都是以一个权限很低的账号启动的,因…

管理系统的实现_03

文章目录 登录界面的开发安装axios用于前后端交互第一步、在项目目录下执行命令第二步、在main.js文件夹添加如下代码第三步、使用this.axios 即可访问到 Login.vue 完整代码如下搭建第一个springboot项目第一步、修改配置文件(application.properties)第二步、创建包目录 用sp…

希尔排序(C++)

希尔排序 是插入排序的一种,也是缩小增量排序。希尔排序是记录按下标的一定增量分组,对每组使用直接插入排序算法排序;随着增量逐渐减少,每组包含的关键词越来越多,当增量减至1时,整个文件恰被分成一组&am…

常用的极限

常用的极限 方法1 利用基本极限求极限 1.常用的基本极限 一个函数极限是非零常数,分母极限为零,分子极限必为零 幂指函数转为指数函数的形式,再等价代换 方法二 分子分母凑成可以使用等价无穷小代换的形式 arcsinx 和 sin x 作为分子是相减的. 1 先使用…

数据结构之带头循环双向链表

目录 1.何为双链表? 2.带头循环双向链表 1.函数接口与结构体 2.初始化链表 3.销毁链表 4.打印链表 5.创建节点 6.尾插 7.尾删 8.头插 9.头删 10 查找节点 11.在pos前插入x 12.删除pos位置的值 在学习了单链表之后,我们发现单链表弥补了了顺…

Spring 管理 Bean-IOC--基于注解配置 bean

目录 Spring 管理 Bean-IOC--基于注解配置 bean ● 基本介绍 ● 组件注解的形式有 代码演示--了解注解 UserDao UserService UserAction MyComponent 配置 beans.xml 注意 测试 注意事项和细节说明 自动装配 基本说明 应用实例需求 UserService UserAction 配置…

MLC LLM:将大模型运行在手机端的部署工具

前言 MLC LLM 是一个通用的解决方案 它允许任何语言模型在不同的硬件后端和本地应用程序集上进行本地部署 并为每个人提供一个高效的框架,以进一步优化模型的性能,满足他们自己的用例 其使命是让每个人都能在自己的设备(如手机端&#xf…

WordPress 不使用ftp更新

文章目录 摘要修改 wp-config.php文件处理 413 Request Entity Too Large修改nginx配置:client_max_body_size重启nginx 处理uploaded file exceeds the upload max filesize找到php.ini修改 upload_max_filesize重启php 摘要 每次 WordPress 有插件或主题更新都要…

计算机组成原理第五章(2)---中断

5.1概述 产生和应用 在IO设备和主机交换数据时,由于设备本身的机电特性的影响,其工作速度比较低,与CPU无法匹配,如果采用程序查询的方式需要CPU进行等待,但是如果在等待的过程中CPU可以执行其他的程序,可…

04_Uboot操作命令与其他命令

目录 BOOT 操作命令 bootz命令 bootm 命令 reset 命令 go 命令 run 命令 mtest 命令 BOOT 操作命令 uboot的本质工作是引导Linux,所以uboot肯定有相关的boot(引导)命令来启动Linux。常用的跟boot有关的命令有:bootz、bootm和boot。 bootz命令 要启动Linux,需要先将Lin…

《LearnUE——基础指南:上篇—1》——GamePlay架构之Actor和Component

目录 Component大法好,谁用谁知道!! 1.1.1 创世(UObject) 1.1.2 造物(Actor) 1.1.3 赋能(Component) Component大法好,谁用谁知道!&#xff0…

合肥职业技术学院分类考试招生职业技能考试 -- 计算机专业

考试大纲模块一 专业能力测试主要内容模块二 技术技能测试主要内容分值分布 分模块讲解模块一 专业能力测试计算机的发展、类型及其应用领域计算机技术的发展计算机应用领域 计算机中数据的表示、存储和处理计算机软、硬件系统的组成及主要技术指标计算机软、硬件系统的组成硬件…

YOLOv5-7.0训练中文标签的数据集

链接&#xff1a;https://pan.baidu.com/s/1KSROxTwyYnNoNxI5Tk13Dg 提取码&#xff1a;8888 以显示楷体为例&#xff08;上面的百度网盘里面有黑体、宋体、楷体ttf文件&#xff09; (1)将metric.py中&#xff1a; 将 sn.set(font_scale1.0 if nc < 50 else 0.8) # for …

iOS可视化动态绘制八种排序过程

一、可视化解决方案综述 1.交互UI综述 在本篇博客的第一部分我们先来整体的看一下我们Demo的功能。下方就是我们今天博客中的Demo的交互示意图。上方的输入框可以输入要排序元素的个数&#xff0c;下方输入的是300。程序会根据你输入的个数来随机生成数据&#xff0c;你输入30…