072——VUE中vuex之使用mutations修改购物车仓库数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuex之使用mutations修改购物车仓库数据</title>
<script src="vue.js"></script>
<script src="vuex.js"></script>
</head>
<body>
<div id="demo">
<footer-cart></footer-cart>
<Lists></Lists> </div>
<script type="text/x-template" id="Lists">
<div>
<h1 v-if="goods.length==0">
购物车中没有商品
<a href="">去购物吧</a>
</h1>
<div v-if="goods.length>0">
<table border="1">
<tr>
<th>编号</th>
<th>名称</th>
<th>价格</th>
<th>数量</th>
<th>总计</th>
<th>操作</th>
</tr>
<tr v-for="v in goods">
<td>{{v.id}}</td>
<td>{{v.title}}</td>
<td>{{v.price}}</td>
<td>
<input type="text" v-model="v.num">
</td>
<td>{{v.totalPrice}}</td>
<td>
<button @click="del(v.id)">删除</button>
</td>
</tr>
</table>
</div>
</div>
</script>
<script type="text/x-template" id="footerCart">
<div v-if="totalPrice>0">
<div>
总计：{{totalPrice}}
</div>
</div>
</script>
<script>
let Lists = {
template: "#Lists",
computed: {
goods() {
return this.$store.getters.goods;
}
},
methods: {
del(id) {
this.$store.commit('del', {id})
}
}
}
let footerCart = {
template: "#footerCart",
computed: {
totalPrice() {
return this.$store.getters.totalPrice;
}
}
}
let store = new Vuex.Store({
state: {
goods: [
{id: 1, title: 'ihpone7', price: 100, num: 3},
{id: 2, title: 'vivo20', price: 100, num: 2}
]
},
getters: {
//获取商品总价：
totalPrice: state => {
let totalPrice = 0;
state.goods.forEach((v) => {
totalPrice += v.num * v.price;
});
return totalPrice;
},
goods(state) {
let goods = state.goods;
goods.forEach((v) => {
v.totalPrice = v.num * v.price;
})
return goods;
}
},
mutations: {
//删除购物车中的商品
del(state, param) {
let k;
for (let i = 0; i < state.goods.length; i++) {
if (state.goods[i].id == param.id) {
k = i;
break;
}
}
state.goods.splice(k, 1);
}
}
});
var app = new Vue({
el: "#demo",
store,
components: {
Lists, footerCart
}
});
</script>
</body>
</html>
072——VUE中vuex之使用mutations修改购物车仓库数据的更多相关文章
- vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践
vue中前进刷新.后退缓存用户浏览数据和浏览位置的实践 2018年07月07日 11:58:40 大灰狼的小绵羊哥哥 阅读数:4492 vue中,我们所要实现的一个场景就是: 1.搜索页面==&g ...
- Vue中Vuex的详解与使用(简洁易懂的入门小实例)
怎么安装 Vuex 我就不介绍了,官网上有 就是 npm install xxx 之类的.(其实就是懒~~~哈哈) 那么现在就开始正文部分了 众所周知 Vuex 是什么呢?是用来干嘛的呢? Vuex ...
- 074——VUE中vuex之模块化modules开发实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 073——VUE中vuex之使用actions和axios异步初始购物车数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中vuex的五个属性和基本用法
VueX 是一个专门为 Vue.js 应用设计的状态管理构架,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data ). Vuex有五个核心概念: state, ge ...
- 在vue中使用Echarts画曲线图(异步加载数据)
现实的工作中, 数据不可能写死的,所有的数据都应该通过发送请求进行获取. 所以本项目的需求是请求服务器获得二维数组,并生成曲线图.曲线图的横纵坐标均从获得的数据中取得. Echarts官方文档: ht ...
- 071——VUE中vuex之使用getters计算每一件购物车中商品的总价
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 070——VUE中vuex之使用getters计算每一件购物车中商品的总价
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 069——VUE中vuex之使用getters高效获取购物车商品总价
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 20145118 《Java程序设计》 实验报告二
实验二 Java面向对象程序设计 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解设计模式 实验要求 1.没有Lin ...
- 20145332卢鑫 WEB基础
20145332卢鑫 WEB基础 实验过程 1.环境配置 2.简单的网页编写 3.javascript相关 1.相关概念:JavaScript是一种广泛用于客户端Web开发的脚本语言,常用来给HTML ...
- linux内核分析 第五周
一.实验相关 1.下载老师最新的menu文件,并在其中添加上周所编写的代码,并运行 下载 添加 运行 2.gdb调试跟踪 gdb设置跟踪文件(先进入linux-3.18.6所在的文件) gdb设置断点 ...
- Timer，TimerTask，Handler
新建一个定时器线程,通过此线程每一秒发送数据到Handler,然后通过Handler来修改UI. 1.获得Handler,Timer,TimerTask对象. Handler handler=new ...
- ubuntu下交叉编译imagemagick
环境:ubuntu16.04 交叉编译器版本号:4.8.3 在编译之前要编译以下其依赖的软件或库:freetype,libpng,libxml2,libtiff,libjpeg,zlib,graphv ...
- POJ 1679 The Unique MST （次小生成树）题解
题意:构成MST是否唯一 思路: 问最小生成树是否唯一.我们可以先用Prim找到一棵最小生成树,然后保存好MST中任意两个点i到j的这条路径中的最大边的权值Max[i][j],如果我们能找到一条边满足 ...
- hdu 1671 Phone List（字典树）题解
题意:给一连串数字,如果有前缀重复给出NO,否则给出YES 思路:这道题要delete否则爆内存,之前想的直接在insert()里解决查询有错误,所以先保存数据再查询. 代码: #include< ...
- SpringJDBC源码分析记录
我们使用JdbcTemplate时,调用的query方法为: public <T> List<T> query(String sql, @Nullable Object[] a ...
- POJ 1222 EXTENDED LIGHTS OUT（高斯消元解XOR方程组）
http://poj.org/problem?id=1222 题意:现在有5*6的开关,1表示亮,0表示灭,按下一个开关后,它上下左右的灯泡会改变亮灭状态,要怎么按使得灯泡全部处于灭状态,输出方案,1 ...
- spoj TBATTLE 质因数分解+二分
题目链接:点击传送 TBATTLE - Thor vs Frost Giants #number-theory #sliding-window-1 Thor is caught up in a fie ...