vue2.0 练习项目-外卖APP(2)
今天终于把商品页和购物车功能弄出来了,在这个开发过程中遇到一些小坑,比如购物车和商品页是分开两个组件的,没有利用到vue的双向数据绑定的特性,导致在操作加减商品数量时两个组件的数据没有同步,后来我就重写了一遍,好好的利用了vuex的状态保持,这个东西真的很好用。先秀一段我写的vuex代码吧!
1 //状态管理 2 export default (Vuex) => { 3 return new Vuex.Store({ 4 state: { 5 totalMoney: 0, //已选购商品总价格 6 productArray: [] //已选购商品数组 7 }, 8 mutations: { 9 setTotalMoney(state, num) { //设置商品总价格 10 state.totalMoney = num; 11 }, 12 mathTotalMoney(state) { //计算已选购商品总价格 13 let total = 0; 14 for (let i = 0; i < state.productArray.length; i++) { 15 let item = state.productArray[i]; 16 total += (item.count * item.price); 17 } 18 state.totalMoney = total; 19 }, 20 setProductArray(state, obj) { //商品放入或拿出购物车 21 let index = -1; 22 for (let i = 0; i < state.productArray.length; i++) { 23 var item = state.productArray[i]; 24 if (obj.id == item.id) { 25 index = i; 26 break; 27 } 28 } 29 if (index >= 0) { 30 if (obj.count <= 0) { 31 state.productArray.splice(index, 1); 32 } else { 33 state.productArray[index] = obj; 34 } 35 } else { 36 state.productArray.push(obj); 37 } 38 }, 39 clearProduct(state) { //清空购物车 40 state.productArray = []; 41 } 42 }, 43 getters: { 44 getTotalMoney(state) { //获取商品总价格 45 return state.totalMoney; 46 }, 47 getProductArray(state) { //获取已选购商品 48 return state.productArray; 49 }, 50 getProductById: (state, getters) => (id) => { //根据ID获取已选商品 51 for (let i = 0; i < state.productArray.length; i++) { 52 var item = state.productArray[i]; 53 if (item.id == id) { 54 return item; 55 } 56 } 57 return false; 58 } 59 } 60 }); 61 }
不过我总觉得,我这样的用法有点不太对的。贴个代码,希望有高手指点下,我这样使用vuex可取不。
1 import Vue from 'vue'; 2 import App from './App'; 3 import router from './router'; 4 import VueResource from 'vue-resource'; 5 import Vuex from 'vuex'; 6 import vuex_store from './store'; 7 8 Vue.use(VueResource); 9 Vue.use(Vuex); 10 11 new Vue({ 12 el: '#app', 13 router, 14 template: '<App/>', 15 components: { App }, 16 store: vuex_store(Vuex) 17 });
上面代码就是入口文件,我将来 vuex 对象再传入我自己写的那个store模块中。接着继续说我的商品页和购物车吧,贴个动图给大看看效果如何。
商品也和购物车功能,暂且就这些了。重点还是在布局上,js上的逻辑都不难。可以上我的github获取源码看看咯。
源码地址:https://github.com/codeyoyo/seller-app
转载于:https://www.cnblogs.com/lzy138/p/7737397.html
vue2.0 练习项目-外卖APP(2)相关推荐
- 【vue2.0后台项目之登陆】01登陆开发流程分析
登陆开发流程 1.前言 2.vue-admin-template模板介绍 3. vue-admin-template模板结构分析 4.axios的二次封装 5.请求后端接口 6.表单验证 7.派发ac ...
- 一款基于Vue2.0高仿微信App的单页应用
概述 利用Vue2.0模仿微信app,努力做到以假乱真的效果.个人独立开发,源码中有详细的注释,为新手提供许多有用的提示信息.项目的第一期接近尾声,后期会增加 仿3DTouch.登陆.注册.emoji ...
- 基于vue2.0+ 抽奖项目
前言 临近年关抽奖活动,基于vue2.0+开发的抽奖项目. 便于查看效果,贴上相关地址: 在线示例地址:快速访问 github地址:查看源码 简介 基于vue.js抽奖项目,截屏保存每次抽奖图片至本地 ...
- vue2.0实战项目——简单的快餐店系统
最近学习vue看到网上很多学习的资料,就找了一个项目系统练习,主要是想学习了的一些知识点,系统的组合运用一遍.网上根据技术胖老师博客的内容自己也实战了一遍,挺实用的,对vue框架有了更深入的了解以及自 ...
- vue2.0创建项目步骤
一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI :@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vu ...
- vue2.0 创建项目
准备 安装淘宝 npm镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 添加系统变量path的内容 因为cnpm会被安 ...
- vue2.0 vue-cli项目中路由之间的参数传递
1.首先配置路由, import Vue from 'vue' import Router from 'vue-router'Vue.use(Router)export default new Rou ...
- 创建VUE项目,vue-cli2.0版本和3.0版本的区别,将vue2.0项目升级为vue3.0项目
创建VUE项目,vue-cli2.0版本和3.0版本的区别,将vue2.0项目升级为vue3.0项目 使用vue-cli2.0版本创建vue项目 创建前的准备 开始创建 创建过程 项目正常创建 使用v ...
- 干货分享:vue2.0做移动端开发用到的相关插件和经验总结(2)
最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少.经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及到的微信api( ...
最新文章
- 如何使用ModelSim作前仿真與後仿真? (真oo无双前辈)
- UVa10763 交换学生
- Linux上使用find、xargs、grep递归的查找指定文件类型中的内容
- 用户中心 - 修改用户信息
- go程序的跨平台编译
- 如何 配置apache 读取php模块中的 配置文件
- 获取数据库链接Junit
- RHEL5 下构建PPTP ***服务器
- [转载] python3 闭包
- 二维旋转矩阵公式推导
- java socket 面试题_Java面试题及答案
- 【Echarts】三维地图叠加柱状图
- matlab红点沿着正弦曲线运动,如何使用css3让一个元素做正弦曲线运动?
- python-web开发(一)知识储备准备
- 微信扫描二维码实现下载app文件
- 蓝桥杯国赛8-JavaA-2-瓷砖样式
- uniapp 点击动画_uni-app 点击元素左右抖动效果
- python创建数据库字数不限制_Python之Mysql数据库
- B站(Bilibili) 视频的下载。
- axios发送x-www-form-urlencoded格式数据
热门文章
- 权益证明协议中的拜占庭容错
- JPA HttpMessageNotWritableException: Could not write content: Infinite recursion (StackOverflowError
- Android Studio中引入RecyclerView的v7包
- Android开发工具之Android Studio---版本控制SVN使用三(常规操作)
- JZOJ 5699. 【gdoi2018 day1】涛涛接苹果(appletree)
- php xml 格式化,PHP实现浏览器格式化显示XML的方法示例
- java搭建maven项目_Eclipse使用maven创建Java Web项目完整示例
- au加载默认的输入和输出设备失败_一文带你读懂 C/C++ 语言输入输出流与缓存区...
- php 获取当前url hash,http - 我可以在服务器端应用程序(PHP,Ruby,Python等)上读取URL的哈希部分吗?...
- three.js glb 多个_25万的预算,奔驰GLB、宝马X1、奥迪Q3该怎么选