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就会消失,导致你需要再次进行登录操作 在这给大家列出几种解决方案: 第一种(也是一些项目中常使用的):使用缓 ...
随机推荐
- Android 实践项目开发一
这次做的项目是—手机地图系统 本次实验的功能是,为用户提供需要的目标定位系统定位处理,即用户设置一个目标后, 可以在后台启动一个Service,能够定时读取GPS数据已获得用户当前所在的位置信息, 并 ...
- ubuntu搭建discuz论坛
a.安装mysql database 1.安装mysql服务端 sudo apt-get install mysql-server (在此过程中要求为mysql的root用户设置一个密码) 2.安装 ...
- mysql 通过binlog 查看执行日志
环境:linux deepin15.7 mysql 5.7 1.开启binlog vim /etc/mysql/mysql.conf.d/mysqld.cnf 添加 log_bin = /var/ ...
- IntelliJ-IDEA和Git、GitHub、Gitlab的使用
一.基本入门 1.IntelliJ-IDEA预装的版本控制介绍 我们来看IntelliJ-IDEA的版本控制设置区域 打开File>Settings>Version Control 可以 ...
- 【第三十七章】 springboot+docker（手动部署）
一.下载centos镜像 docker pull hub.c.163.com/library/centos:latest docker tag containId centos:7 docker ru ...
- jquery 之$.fn的用法示例
$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 若扩展$.fn.abc(),即$.fn.abc()是对jquery扩展一个abc的方法,那么每个jquer ...
- Maven java.lang.OutOfMemeoryError 问题
设置MAVEN_OPTS环境变量的值为:-Xms128m -Xmx512m Java默认的最大可用内存往往不能够满足Maven运行的需要 比如在项目较大时,使用Maven生成项目站点需要占用大量的内存 ...
- jq expando && $.data()
1.使用隐藏控件或者是js全局变量来临时存储数据,全局变量容易导致命名污染,隐藏控件导致经常读写dom浪费性能 jQuery提供了自己的数据缓存方案,使用jQuery数据缓存方案,我们需要掌握$.da ...
- ASCII 对照表
ASCII(American Standard Code for Information Interchange,美国信息互换标准代码,ASCⅡ)是基于拉丁字母的一套电脑编码系统.它主要用于显示现代英 ...
- Spring Cloud常用组件介绍
一.Eureka (Netfix下) 云端服务发现,一个基于 REST 的服务,用于定位服务,以实现云端中间层服务发现和故障转移. 二.Spring Cloud Config (Spring下) 配置 ...