074——VUE中vuex之模块化modules开发实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuex之模块化modules开发实例</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() {
//console.log(this.$store.state.cart.goods);
return this.$store.getters['cart/goods'];
}
},
methods: {
del(id) {
this.$store.commit('del', {id})
}
}
}
let footerCart = {
template: "#footerCart",
computed: {
totalPrice() {
return this.$store.getters['cart/totalPrice'];
}
}
}
const cartModule={
namespaced:true,//定义组件的命名空间：
state: {
goods: [{id:12}]
},
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);
})
}
}
};
let store = new Vuex.Store({
modules:{
cart:cartModule
}
});
var app = new Vue({
el: "#demo",
store,
components: {
Lists, footerCart
},
mounted() {
this.$store.dispatch('cart/loadGoods');
}
});
</script>
</body>
</html>
074——VUE中vuex之模块化modules开发实例的更多相关文章
- vue中vuex的五个属性和基本用法
VueX 是一个专门为 Vue.js 应用设计的状态管理构架,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data ). Vuex有五个核心概念: state, ge ...
- Vue中Vuex的详解与使用(简洁易懂的入门小实例)
怎么安装 Vuex 我就不介绍了,官网上有 就是 npm install xxx 之类的.(其实就是懒~~~哈哈) 那么现在就开始正文部分了 众所周知 Vuex 是什么呢?是用来干嘛的呢? Vuex ...
- vue中scoped vs css modules
注意:此文是默认你已经具备scoped和css modules的相关基础知识,所以不做用法上的讲解. 在vue中,我们有两种方式可以定义css作用域,一种是scoped,另一种就是css module ...
- VUE中toast的使用与开发
在这篇文章中介绍了toast是什么,这篇文章主要介绍toast的开发与使用. 开发 Vuejs很流行,并且官方也给出了路由插件vue-router.数据管理插件vuex,但是我们仅仅停留在了使用的阶段 ...
- 073——VUE中vuex之使用actions和axios异步初始购物车数据
<!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 ...
- 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 ...
随机推荐
- 20145127《java程序设计》第五周学习总结
教材学习内容总结 第八章 异常处理 1.try catch java中所有错误会被打包成对象,可以进行尝试捕捉代表错误的对象进行处理. Import java.until.Scanner; Publi ...
- tf.reduce_sum tensorflow维度上的操作
tensorflow中有很多在维度上的操作,本例以常用的tf.reduce_sum进行说明.官方给的api reduce_sum( input_tensor, axis=None, keep_dims ...
- Nodejs -- 使用koa2搭建数据爬虫
当前爬虫项目开发所需中间件: cheerio: 则能够对请求结果进行解析,解析方式和jquery的解析方式几乎完全相同 cheerio中文文档 开发参考node - cheerio模块 superag ...
- JAVA I/O（三）内存映射文件
<Java编程思想>中对内存映射文件有详细的介绍,此处仅做简单记录和总结.内存映射文件允许创建和修改因为太大而不能放入内存的文件. 1. 内存映射文件简单实例 import java.io ...
- cmd命令安装、卸载、启动和停止Windows Servic
1.运行--〉cmd:打开cmd命令框 2.在命令行里定位到InstallUtil.exe所在的位置 InstallUtil.exe 默认的安装位置是在C:/Windows/Microsoft.NET ...
- DSDS，双模，双卡，双待，单待，双通，单通，概念及相互关系？【转】
本文转载自:https://blog.csdn.net/dirk_it/article/details/7178058?utm_source=blogxgwz9 DSDS:双卡双待 DualSimDu ...
- 高斯消元&&luogu3389
高斯消元(Gauss) 高斯消元和我们做二元一次方程组差不多 流程: 1.把系数和右边的值就是用二维数组存下来->转化成矩阵 我们的目标是把这个矩阵装换成 上三角的形式 对角线系数全部为1,1下 ...
- POJ 1740 A New Stone Game（博弈）题解
题意:有n个石子堆,每一个都可以轮流做如下操作:选一个石堆,移除至少1个石子,然后可以把这堆石子随便拿几次,随便放到任意的其他石子数不为0的石子堆,也可以不拿.不能操作败. 思路:我们先来证明,如果某 ...
- 51nod 1043 幸运号码（数位dp
1043 幸运号码 1个长度为2N的数,如果左边N个数的和 = 右边N个数的和,那么就是一个幸运号码. 例如:99.1230.123312是幸运号码. 给出一个N,求长度为2N的幸运号码的数量 ...
- Linux 安装 mysql 转 http://www.cnblogs.com/fnlingnzb-learner/p/5830622.html
到mysql官网下载mysql编译好的二进制安装包,在下载页面Select Platform:选项选择linux-generic,然后把页面拉到底部,64位系统下载Linux - Generic (g ...