073——VUE中vuex之使用actions和axios异步初始购物车数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuex之使用actions和axios异步初始购物车数据</title>
<script src="vue.js"></script>
<script src="vuex.js"></script>
<script src="node_modules/axios/dist/axios.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: []
},
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);
},
setGoods(state, param) {
state.goods = param.goods;
}
},
actions: {
loadGoods(store) {
axios.get('073.php').then(function (response) {
store.commit('setGoods', {goods: response.data})
//console.log(response);
})
}
}
});
var app = new Vue({
el: "#demo",
store,
components: {
Lists, footerCart
},
mounted() {
this.$store.dispatch('loadGoods');
}
});
</script>
</body>
</html>
073.php代码：
<?php
$data = [
['id' => 1, 'title' => 'ihpone7', 'price' => 100, 'num' => 3],
['id' => 2, 'title' => 'ihpone8', 'price' => 200, 'num' => 4],
];
echo json_encode($data);
?>
073——VUE中vuex之使用actions和axios异步初始购物车数据的更多相关文章
- 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 ...
- Vue中Vuex的详解与使用(简洁易懂的入门小实例)
怎么安装 Vuex 我就不介绍了,官网上有 就是 npm install xxx 之类的.(其实就是懒~~~哈哈) 那么现在就开始正文部分了 众所周知 Vuex 是什么呢?是用来干嘛的呢? Vuex ...
- vue中vuex的五个属性和基本用法
VueX 是一个专门为 Vue.js 应用设计的状态管理构架,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data ). Vuex有五个核心概念: state, ge ...
- Vue中结合Flask与Node.JS的异步加载功能实现文章的分页效果
你好!欢迎阅读我的博文,你可以跳转到我的个人博客网站,会有更好的排版效果和功能. 此外,本篇博文为本人Pushy原创,如需转载请注明出处:http://blog.pushy.site/posts/15 ...
- 074——VUE中vuex之模块化modules开发实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 072——VUE中vuex之使用mutations修改购物车仓库数据
<!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 ...
- 068——VUE中vuex的使用场景分析与state购物车实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- zabbix监控之自定义item
zabbix安装完成后,当需要使用自定义脚本构建自定义item必须注意以下几点: 1.首先使用zabbix_get手动在zabbix-server服务端获取监控的默认的item值,如下: [root@ ...
- 0x30、0x37
1.write_date(0x30+shi)加0x30是什么意思 答: 将数字0-9转化为字符'0'-'9' 1.write_date(0x37+bai)加0x37是什么意思 答: 将大于9的数字转化 ...
- bzoj 2427 软件安装 - Tarjan - 树形动态规划
题目描述 现在我们的手头有N个软件,对于一个软件i,它要占用Wi的磁盘空间,它的价值为Vi.我们希望从中选择一些软件安装到一台磁盘容量为M计算机上,使得这些软件的价值尽可能大(即Vi的和最大). 但是 ...
- IntelliJ IDEA 连接数据库 详细过程
IntelliJ IDEA集成了众多插件,方便开发者使用,使用其自带的Database模块就可以很方便的配置.连接到数据库,本次操作以MySQL为例,其中testjdbc数据库已经提前建好,里面有两张 ...
- I2C总线信号时序总结【转】
本文转载自:https://i.cnblogs.com/EditPosts.aspx?opt=1 I2C总线信号时序总结 总线空闲状态 I2C总线总线的SDA和SCL两条信号线同时处于高电平时,规定 ...
- Linux写时拷贝技术【转】
本文转载自:http://www.cnblogs.com/biyeymyhjob/archive/2012/07/20/2601655.html COW技术初窥: 在Linux程序中,fork()会产 ...
- BZOJ 1044: [HAOI2008]木棍分割 DP 前缀和优化
题目链接 咳咳咳,第一次没大看题解做DP 以前的我应该是这样的 哇咔咔,这tm咋做,不管了,先看个题解,再写代码 终于看懂了,卧槽咋写啊,算了还是抄吧 第一问类似于noip的那个跳房子,随便做 这里重 ...
- 导出数据库表为world文档说明，以及PowerDesigner导出表结构pdm设计文档
如何使用“mysql导出数据库结构为world工具”以及如何使用powerdesigner映射数据库模型 一.通过powerdesigner配置ojdbc 1.安装并打开powerdesigner,新 ...
- Ubuntu 12.04 安装JDK
为了在Ubuntu上安装好eclipse,按照步骤先进行JDK的安装. (1) 新建java文件夹 命令行操作: (2) 下载解压JDK安装包后无法移动文件夹至File System 移动时提示:Pe ...
- poj 1144 Network 无向图求割点
Network Description A Telephone Line Company (TLC) is establishing a new telephone cable network. Th ...