vue系列教程之微商城项目|vuex全局状态管理-加入购物车

简介: vue系列教程之微商城项目|vuex全局状态管理-加入购物车

问题描述

vuex简介

vuex是vue项目中用于管理全局状态的插件,如果对状态二字不明了,就简单理解成全局变量即可.

全局状态管理方式有很多,千奇百怪,比如bus总线、自定义一个js文件等,感兴趣可以自行百度,不了解也没关系.不同的方法不利于代码阅读和管理,所以vuex统一了全局状态管理的方式。


解决方案

vuex创建和引用

自动创建和引用

在用脚手架vue-cli创建项目时(vue create xxx),如果已经选择了vuex,那么在项目src目录下会自动创建store文件夹,并自动引入项目中。

手动创建和引用

如果项目创建时没选vuex,来看一下配置步骤

1.在项目根目录下,执行 npm install vuex 下载插件

2.新建 src/store/index.js

3.编写基础代码

src/store/index.js

4.在main.js中,将vuex引入到项目中

vuex使用

src/store/index.js 文件中,我们只需要关注state、getters、mutations、actions、modules五个对象即可.

 

1.state 用于存放全局变量案例:

2.getters 用于在其他页面获取state中的对象,所以getters内放置的都是函数,用于返回state中的值。

类似与data和computed的关系。因为state中存放的全局变量不建议直接读取和修改。

案例:

 

在某个页面中获取name变量

3.mutations 用于修改state中全局变量的值,该操作是同步的案例:

在某个页面中修改name变量

4.actions 同样用于修改state中全局变量的值,但该操作是异步的,如果修改name变量的过程中有异步操作,需要放在这里。比如网络请求就是异步操作.

在某个页面中调用异步方式修改name变量

5.modules 如果想在项目中设置多个vuex对象,根据某种分类存放不同的全局变量,需要用到该属性,本项目中不使用,所以使用方法自行百度.

加入购物车

编写全局变量,保存商品信息

store/index.js

 

在商品详情页中的'加入购物车'点击事件中,调用mutations中的函数,将商品保存到全局变量中

查看打印结果

目录
相关文章
|
5天前
|
前端开发
vue3+ts项目中使用mockjs
vue3+ts项目中使用mockjs
200 58
|
2天前
|
JavaScript 前端开发 UED
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
|
8天前
|
数据采集 JavaScript 搜索推荐
我们一起聊聊如何对Vue项目进行搜索引擎优化
【9月更文挑战第4天】Vue 项目的搜索引擎优化(SEO)较为复杂,因其内容默认由 JavaScript 渲染,部分搜索引擎难以索引。为提升 SEO 效果,可采用服务器端渲染(SSR)或预渲染,使用 Nuxt.js 或 Vue Server Renderer 实现 SSR,或利用 Prerender SPA Plugin 预渲染静态 HTML。此外,动态管理 Meta 标签、优化静态内容与 Sitemap、懒加载、图片优化、提升页面速度、设置正确的路由模式、使用结构化数据及构建良好外链均有益于 SEO。
41 11
|
16天前
|
JavaScript
Vue3相关组件项目依赖依赖版本信息
这篇文章展示了一个Vue 3项目中使用的组件和库的依赖版本信息,包括`ant-design-vue`、`swiper`、`vue`、`vue-router`等,以及开发依赖如`vite`、`vue-tsc`、`eslint`等。
Vue3相关组件项目依赖依赖版本信息
|
15天前
|
JavaScript 前端开发 API
解锁前端开发新境界:Vue.js携手Webpack,打造高效构建流程,你的项目值得拥有!
【8月更文挑战第30天】随着前端技术的发展,模块化与组件化趋势愈发显著。Vue.js 以其简洁的 API 和灵活的组件系统,深受开发者喜爱;Webpack 则凭借强大的模块打包能力成为前端工程化的基石。两者结合,不仅简化了组件编写与引用,还通过模块热替换、代码分割等功能大幅提升开发效率。本文将通过具体示例,展示如何利用 Vue.js 和 Webpack 构建高效、有序的前端开发环境。从安装配置到实际应用,逐步解析这一组合的优势所在。
34 0
|
15天前
|
存储 JavaScript 前端开发
Vue.js + Vuex:解锁前端复杂应用的神秘钥匙,探索状态管理的新境界!
【8月更文挑战第30天】Vue.js结合Vuex状态管理,为复杂前端应用提供了解锁高效与优雅的金钥匙。Vue.js凭借简洁的API和高效虚拟DOM更新机制广受好评,但在大规模应用中,组件间状态共享变得复杂。这时,Vuex通过中心化状态存储,使状态管理清晰可见,如同为Vue.js应用增添智慧大脑。例如,在购物车应用中,Vuex通过`state`、`mutations`、`actions`和`getters`清晰管理状态,简化组件间状态同步,减少耦合,确保单一状态源,使开发更加高效有序。在Vue.js的世界里,Vuex是一位智慧管家,让前端开发不仅高效,更成为一门艺术。
10 0
|
4天前
|
JavaScript
vue学习(3)模板语法
vue学习(3)模板语法
34 11
|
4天前
|
存储 JavaScript 前端开发
vue学习(2)
vue学习(2)
194 65
|
4天前
|
JavaScript 算法 前端开发
vue学习(1)
vue学习(1)
194 62
|
3天前
|
JavaScript
vue学习(4)数据绑定
vue学习(4)数据绑定
17 10