068——VUE中vuex的使用场景分析与state购物车实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuex的使用场景分析与state购物车实例</title>
<script src="vue.js"></script>
<script src="vuex.js"></script>
</head>
<body>
<div id="demo">
<lists></lists>
</div>
<script type="text/x-template" id="lists">
<div>
<table>
<tr><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>
</tr>
</table>
<h1>总价：{{totalPrice}}</h1>
</div>
</script>
<script>
store = new Vuex.Store({
state: {
totalPrice: 100,
goods: [
{id: 1, title: "iphone7Plus", price: 399},
{id: 2, title: "vivo20", price: 3909}
]
}
});
let lists = {
template: "#lists",
computed: {
totalPrice() {
return this.$store.state.totalPrice;
},
goods() {
return this.$store.state.goods;
}
}
}
new Vue({
el: "#demo",
store,
components: {
lists
}
});
</script>
</body>
</html>
068——VUE中vuex的使用场景分析与state购物车实例的更多相关文章
- Vue中Vuex的详解与使用(简洁易懂的入门小实例)
怎么安装 Vuex 我就不介绍了,官网上有 就是 npm install xxx 之类的.(其实就是懒~~~哈哈) 那么现在就开始正文部分了 众所周知 Vuex 是什么呢?是用来干嘛的呢? Vuex ...
- vue中vuex的五个属性和基本用法
VueX 是一个专门为 Vue.js 应用设计的状态管理构架,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data ). Vuex有五个核心概念: state, ge ...
- 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 ...
- 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 ...
- vue中vuex实现持久化的几种方法
前提:大家都知道vuex真的数据共享是不持久的,例如登录后一刷新,state中存的token就会消失,导致你需要再次进行登录操作 在这给大家列出几种解决方案: 第一种(也是一些项目中常使用的):使用缓 ...
随机推荐
- 20145227鄢曼君《网络对抗》Web基础
20145227鄢曼君<网络对抗>Web基础 实验内容 (1)Web前端HTML (2)Web前端javascipt (3)Web后端:MySQL基础:正常安装.启动MySQL,建库.创建 ...
- 20145317《网络对抗》shellcode注入&Return-to-libc攻击深入
20145317<网络对抗>shellcode注入&Return-to-libc攻击深入 学习任务 shellcode注入:shellcode实际是一段代码,但却作为数据发送给受攻 ...
- 25个c#知识点
网站地址:http://m.3y.uu456.com/mbp_56hl91r1rx5uqa87qrzo_1.html
- 括号序和dfs序
记得清北讲过括号序和dfs序,忘记了 dfs序 dfs序就是dfs的顺序,这个好记 就是在dfs遍历树的时候,将每个结点开始时记录一次,结束时记录一次 而且一个子树可以表示为连续的一段, 只有子树操作 ...
- BZOJ1304: [CQOI2009]叶子的染色 树形dp
Description 给一棵m个结点的无根树,你可以选择一个度数大于1的结点作为根,然后给一些结点(根.内部结点和叶子均可)着以黑色或白色.你的着色方案应该保证根结点到每个叶子的简单路径上都至少包含 ...
- 总结java中的super和this关键字
知识点: 在java类中使用super引用父类的成分,用this引用当前对象 this可以修饰属性.构造器.方法 super可以修饰属性.构造器.方法 关于子类实例化过程中的内存分配,在下一篇博客中说 ...
- 每个成长者,必须学会可以练习 (来自ProcessOn流程图工具作者底部)
- HDU 6128 Inverse of sum（同余）
http://acm.hdu.edu.cn/showproblem.php?pid=6128 题意:有一个a数列,并且每个数都小于p,现在要求有多少对$(i,j)$满足$\frac{1}{a_i+a_ ...
- Cocos2d-x学习笔记（十一）动作
动作类Action是一切动作的祖先类.它有三个直接继承子类: FiniteTimeAction受时间限制的动作: Follow精灵跟随精灵的动作: Speed运动速度控制: 而FiniteTimeAc ...
- rospy 中service
Server部分: #!/usr/bin/env python import sys import os import rospy #from beginner.srv import * from b ...