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

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.mfbz.cn/a/17180.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Leetcode -142.环形链表Ⅱ -143.重排链表】

Leetcode Leetcode -142.环形链表ⅡLeetcode - 143.重排链表 Leetcode -142.环形链表Ⅱ 题目:给定一个链表的头节点 head ,返回链表开始入环的第一个节点。 如果链表无环,则返回 null。 如果链表中有某个节点,可以通过连续跟踪 …

Spring源码解读——高频面试题

Spring IoC的底层实现 1.先通过createBeanFactory创建出一个Bean工厂(DefaultListableBeanFactory) 2.开始循环创建对象,因为容器中的bean默认都是单例的,所以优先通过getBean、doGetBean从容器中查找,如果找不到的…

QML状态与过渡(States and Transitions)

目录 一 状态(States) 一 过渡(Transitions) 通常我们将用户界面描述为一种状态。一个状态定义了一组属性的改变,并且会在一定的条件下被触发。另外在这些状态转化的过程中可以有一个过渡,定义了这些属性…

SpringBoot+vue文件上传下载预览大文件分片上传文件上传进度

文章目录 学习链接上传文件前端后端代码 下载文件a标签下载前端代码后台代码 动态a标签下载前端代码 axios 动态a标签前端代码 浏览器直接输入 预览文件前端代码后端代码 分片上传前后端分别md5加密spark-md5commons-codec 分片上传实现1前端代码后端代码 分片上传实现2前端代…

Spark RDD 持久化(CheckPoint 检查点)

RDD Cache 缓存 RDD 通过 Cache 或者 Persist 方法将前面的计算结果缓存,默认情况下会把数据以缓存 在 JVM 的堆内存中。但是并不是这两个方法被调用时立即缓存,而是触发后面的 action 算 子时,该 RDD 将会被缓存在计算节点的内存中 // cach…

常用排序算法汇总—Python版

一、选择排序 1. 原理: 选择排序(Selection Sort)是一种简单直观的排序算法,它的基本思路是将数组按顺序分成已排序部分和未排序部分,然后每次从未排序部分中选择出最小的元素,将其添加到已排序部分的末尾…

【五一创作】【软考:软件设计师】 5 计算机组成与体系结构(三)认证技术 | 计算机可靠性

欢迎来到爱书不爱输的程序猿的博客, 本博客致力于知识分享,与更多的人进行学习交流 本文收录于软考中级:软件设计师系列专栏,本专栏服务于软考中级的软件设计师考试,包括不限于知识点讲解与真题讲解两大部分,并且提供电子教材与电子版真题,关注私聊即可 …

三范式(详解+例子)

第一范式(1NF):每一列都是不可分割的原子数据项(什么意思,每一项都不可分割,像下面的表格就能分割,所以它连第一范式都算不上) 分割后的样子 (它就是第一范式了&#xff…

FPGA学习_01_基础知识(有点劝退,心灵弱小者勿入)

有些人喜欢直接拿开发板看教程开干,我认为了解点历史发展没什么坏处,一些FPGA的基础知识也是同样重要的。 1.1. FPGA的主要厂商 XILINX 占据FPGA绝大部分的市场份额 ALTERA 被 INTEL 167亿美元收购 改名为INTEL LATTICE 被神秘的中国公…

HMM理论学习笔记-隐马尔可夫模型的三个元素、假设和问题

文章目录 概率论基础条件概率全概公式边缘概率联合概率联合概率与边缘概率的关系贝叶斯公式(条件联合概率)马尔科夫链的概念 HMM简述HMM的三个元素符号定义1、状态转移概率矩阵A2、观测概率矩阵B3、初始状态概率向量π HMM的三个假设1、齐次马尔可夫假设…

Spring Boot使用(基础)

目录 1.Spring Boot是什么? 2.Spring Boot使用 2.1Spring目录介绍 2.2SpringBoot的使用 1.Spring Boot是什么? Spring Boot就是Spring脚手架,就是为了简化Spring开发而诞生的 Spring Boot的优点: 1.快速集成框架,提供了秒级继承各种框架,提供了启动添加依赖的功能 2.内…

简单搭建node后台(笔记用)

毕设过程 mongodb 配置 使用node写后台一些语法运用bug关于安装一款群控软件后,修改了环境变量导致后台崩溃![](https://img-blog.csdnimg.cn/7c684b2e318048b3ad1db78484e10e6a.jpeg) vue管理后台 mongodb 配置 https://blog.csdn.net/weixin_43405300/article/de…

【SPSS】相关分析和偏相关分析详细操作过程(附案例实战)

🤵‍♂️ 个人主页:艾派森的个人主页 ✍🏻作者简介:Python学习者 🐋 希望大家多多支持,我们一起进步!😄 如果文章对你有帮助的话, 欢迎评论 💬点赞&#x1f4…

java的spi机制使用场景讲解和具体使用

八股文背多了,相信大家都听说过一个词,SPI扩展。 有的面试官就很喜欢问这个问题,SpringBoot的自动装配是如何实现的? 基本上,你一说是基于spring的SPI扩展机制,再把spring.factories文件和EnableAutoConf…

C++(多态上)

目录: 1.多态的概念 2.多态的定义和实现 3.虚函数构成重写的特例 4.剖析一道非常经典的题 5.剖析多态的原理 ------------------------------------------------------------------------------------------------------------------------- 1.多态的概念 概念:通俗来说&#…

Word2vec原理+实战学习笔记(二)

来源:投稿 作者:阿克西 编辑:学姐 前篇:Word2vec原理实战学习笔记(一)​​​​​​​ 视频链接:https://ai.deepshare.net/detail/p_5ee62f90022ee_zFpnlHXA/6 5 对比模型(论文Mod…

Python使用AI photo2cartoon制作属于你的漫画头像

Python使用AI photo2cartoon制作属于你的漫画头像 1. 效果图2. 原理3. 源码参考 git clone https://github.com/minivision-ai/photo2cartoon.git cd ./photo2cartoon python test.py --photo_path images/photo_test.jpg --save_path images/cartoon_result.png1. 效果图 官方…

(22)目标检测算法之 yolov8模型导出总结

yolov8模型导出总结 不断更新中… 几种部署情况: onnxxmlengine官网说明:https://github.com/ultralytics/ultralytics/blob/main/docs/modes/export.md导出参数: onnx 参数解析format: 导出的模型形式:onnx xml engine ... imgsz: 设置模型的输入尺寸大小,默认640*640 ke…

磁盘和固态磁盘

磁盘和固态磁盘 磁盘的物理结构 ​ 磁盘的表面由一些磁性的物质组成,可以用这些磁性物质来记录二进制数据。磁盘的盘面被划分成一个个磁道,这样一个“圈”就是一个磁道。同一磁盘上不同磁道上记录的信息量相同,因此内侧磁道上的数据密度较大…

STM32F429移植microPython笔记

目录 一、microPython下载。二、安装开发环境。三、编译开发板源码。四、下载验证。 一、microPython下载。 https://micropython.org/download/官网 下载后放在linux中。 解压命令: tar -xvf micropython-1.19.1.tar.xz 二、安装开发环境。 sudo apt-get inst…