今天终于把商品页和购物车功能弄出来了,在这个开发过程中遇到一些小坑,比如购物车和商品页是分开两个组件的,没有利用到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)相关推荐

  1. 【vue2.0后台项目之登陆】01登陆开发流程分析

    登陆开发流程 1.前言 2.vue-admin-template模板介绍 3. vue-admin-template模板结构分析 4.axios的二次封装 5.请求后端接口 6.表单验证 7.派发ac ...

  2. 一款基于Vue2.0高仿微信App的单页应用

    概述 利用Vue2.0模仿微信app,努力做到以假乱真的效果.个人独立开发,源码中有详细的注释,为新手提供许多有用的提示信息.项目的第一期接近尾声,后期会增加 仿3DTouch.登陆.注册.emoji ...

  3. 基于vue2.0+ 抽奖项目

    前言 临近年关抽奖活动,基于vue2.0+开发的抽奖项目. 便于查看效果,贴上相关地址: 在线示例地址:快速访问 github地址:查看源码 简介 基于vue.js抽奖项目,截屏保存每次抽奖图片至本地 ...

  4. vue2.0实战项目——简单的快餐店系统

    最近学习vue看到网上很多学习的资料,就找了一个项目系统练习,主要是想学习了的一些知识点,系统的组合运用一遍.网上根据技术胖老师博客的内容自己也实战了一遍,挺实用的,对vue框架有了更深入的了解以及自 ...

  5. vue2.0创建项目步骤

    一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI :@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vu ...

  6. vue2.0 创建项目

    准备 安装淘宝 npm镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 添加系统变量path的内容 因为cnpm会被安 ...

  7. vue2.0 vue-cli项目中路由之间的参数传递

    1.首先配置路由, import Vue from 'vue' import Router from 'vue-router'Vue.use(Router)export default new Rou ...

  8. 创建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 ...

  9. 干货分享:vue2.0做移动端开发用到的相关插件和经验总结(2)

    最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少.经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及到的微信api( ...

最新文章

  1. 如何使用ModelSim作前仿真與後仿真? (真oo无双前辈)
  2. UVa10763 交换学生
  3. Linux上使用find、xargs、grep递归的查找指定文件类型中的内容
  4. 用户中心 - 修改用户信息
  5. go程序的跨平台编译
  6. 如何 配置apache 读取php模块中的 配置文件
  7. 获取数据库链接Junit
  8. RHEL5 下构建PPTP ***服务器
  9. [转载] python3 闭包
  10. 二维旋转矩阵公式推导
  11. java socket 面试题_Java面试题及答案
  12. 【Echarts】三维地图叠加柱状图
  13. matlab红点沿着正弦曲线运动,如何使用css3让一个元素做正弦曲线运动?
  14. python-web开发(一)知识储备准备
  15. 微信扫描二维码实现下载app文件
  16. 蓝桥杯国赛8-JavaA-2-瓷砖样式
  17. uniapp 点击动画_uni-app 点击元素左右抖动效果
  18. python创建数据库字数不限制_Python之Mysql数据库
  19. B站(Bilibili) 视频的下载。
  20. axios发送x-www-form-urlencoded格式数据

热门文章

  1. 权益证明协议中的拜占庭容错
  2. JPA HttpMessageNotWritableException: Could not write content: Infinite recursion (StackOverflowError
  3. Android Studio中引入RecyclerView的v7包
  4. Android开发工具之Android Studio---版本控制SVN使用三(常规操作)
  5. JZOJ 5699. 【gdoi2018 day1】涛涛接苹果(appletree)
  6. php xml 格式化,PHP实现浏览器格式化显示XML的方法示例
  7. java搭建maven项目_Eclipse使用maven创建Java Web项目完整示例
  8. au加载默认的输入和输出设备失败_一文带你读懂 C/C++ 语言输入输出流与缓存区...
  9. php 获取当前url hash,http - 我可以在服务器端应用程序(PHP,Ruby,Python等)上读取URL的哈希部分吗?...
  10. three.js glb 多个_25万的预算,奔驰GLB、宝马X1、奥迪Q3该怎么选