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就会消失,导致你需要再次进行登录操作 在这给大家列出几种解决方案: 第一种(也是一些项目中常使用的):使用缓 ...
随机推荐
- redis.windows.conf 参数说明
1. Redis默认不是以守护进程的方式运行,可以通过该配置项修改,使用yes启用守护进程 daemonize no 2. 当Redis以守护进程方式运行时,Redis默认会把pid写入/var/ru ...
- Java继承相关知识总结
Java继承的理解 一.概念: 一个新类从已有的类那里获得其已有的属性和方法,这种现象叫类的继承 这个新类称为子类,或派生类,已有的那个类叫做父类,或基类 继承的好处:代码得到极大的重用.形成一种类的 ...
- sublimeText3最新教程-自带插件汉化（sublime-text_build-3175_amd64）
一.可用注册码 1.更改dns 在linux下的目录是 /etc/hosts 在win7中,hosts文件的位置:C:\Windows\System32\drivers\etc 127.0.0 ...
- linux的dns被劫持
环境:ubuntu16.04 解说:ubuntu使用dnsmasq获取要解析的网站ip,dnsmasq通过域名服务器获取网站ip,并将ip缓存起来,那么就可以减少对外网域名服务器的访问,从而可以使系统 ...
- JavaScript 时间格式
方法1: Date.prototype.Format = function (fmt) { var o = { , //月份 "d+": this.getDate(), //日 = ...
- git源码阅读
https://github.com/git-for-windows/git/issues/1854 https://github.com/git-for-windows/git/pull/1902/ ...
- perl入门知识（3）
引用 在很多场合下使用引用传值,能在很大程度上提高代码的运行效率. 定义一个引用在变量名前加”\”就可以了,如: $ra=\$a; $rb=\@b; ...
- Linux——用户管理简单学习笔记（四）
主要讲两个用户管理的案例: 1: 限制用户su为root,只允许某个组的的用户su # groupadd sugroup 首先添加我们的用户组 # chmod 4550 /bin/su 改变命令的权限 ...
- Linux基础※※※※Linux中的图形相关工具
kolourPaint类似于Win中个mspaint: Ubuntu安装:sudo apt-get install kolourpaint4 图1 kolourPaint界面 其他类似的画图工具见链接 ...
- C++宏定义不受命名空间的约束
// xxx.h namespace A { #define xxx() xxxxx } // 在其他文件中,引入xxx.h文件,使用宏定义时,不需要加命名空间 // yyy.cpp #include ...