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就会消失,导致你需要再次进行登录操作 在这给大家列出几种解决方案: 第一种(也是一些项目中常使用的):使用缓 ...
随机推荐
- 基于qml创建最简单的图像处理程序（3）-使用opencv&qml进行图像处理
<基于qml创建最简单的图像处理程序>系列课程及配套代码基于qml创建最简单的图像处理程序(1)-基于qml创建界面http://www.cnblogs.com/jsxyhelu/p/83 ...
- 20145220韩旭飞《网络对抗》Exp6 信息搜集与漏洞扫描
20145220韩旭飞<网络对抗>Exp6 信息搜集与漏洞扫描 信息搜集 whois查询 以百度的网址为例,使用whois查询域名注册信息: 从上图中可以得到3R注册信息,包括注册人的名字 ...
- Python3基础 函数 无参数无返回值 调用会输出hello world的函数
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- POJ 1679 The Unique MST （次小生成树）题解
题意:构成MST是否唯一 思路: 问最小生成树是否唯一.我们可以先用Prim找到一棵最小生成树,然后保存好MST中任意两个点i到j的这条路径中的最大边的权值Max[i][j],如果我们能找到一条边满足 ...
- Oracle 存储过程入门（一）
一,基本入门介绍 公司系统需要用到oracle,可是还没在项目用过oracle,好吧,从基本学起.有问题的地方,欢迎指导啊. 看创建存储过程的基本定义.注意,带有[]的都是可选的,可有可无的.只是语法 ...
- 【Coursera】Seventh Week
Application Layer:Use the services of the TCP layer Quick Review Link Layer(Ethernet):gets the data ...
- Linux下通过命令行mail发送e-mail
找到配置文件/etc/mail.rc添加如下行 # vi /etc/mail.rc set from=@qq.com set smtp=smtp.qq.com set smtp-auth-user= ...
- tmp for cassandra batch delete
now i have no time to verify this bash script. it is hard for me to delete each data via primary key ...
- Python day9函数部分
函数的学习:函数对于一门编程语言来说挺重要的,尤其是c语言,是完全使用函数来编写的 1.函数的定义:逻辑结构化和过程化的一种编程方法 def squre(x): "求一个数的平方 retur ...
- 小橙书阅读指南（十三）——连通性算法（union-find）
上一章我大概说明了什么是图论以及无向图的基础概念,本章我们要研究一种更普遍的算法——连通性算法.它属于图论的分支,也是一种抽象算法.在深入算法之前,我们先提出一个具体的问题:假设在空间中存在N个点,我 ...