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就会消失,导致你需要再次进行登录操作 在这给大家列出几种解决方案: 第一种(也是一些项目中常使用的):使用缓 ...
随机推荐
- 三步搞定 opencv 初始环境设定
一.设定bin的初始位置:比如我的电脑 D:\安装程序\opencv\build\x86\vc10\bin H:\生产力工具\opencv\build\x86\vc10\bin D:\安装程 ...
- 20145336张子扬《网络对抗》MSF基础应用
20145336张子扬 <网络对抗>MSF基础应用 实验一:主动攻击,利用ms08_067漏洞进行攻击 首先使用use exploit/windows/smb/ ms08_067 _net ...
- linux内核分析 第三周
一.Linux内核源码(简单分析) README 一开始刚接触内核源码的时候,不知道代码文件是什么功能.不清楚如何使用文件的时候,就需要打开README. README提供了内核的各种编译方法.生成文 ...
- PN结讲解
可能大家在使用半导体器件的时候只是在使用它的电气属性,并没有很好的关心下它是什么原因才有了这样的电气属性,那么我们本篇就从物理结构分析下PN结吧. 首先看一张比较陈旧的图图: (就按自己的笔记简单谈谈 ...
- Python3基础 str translate 将指定字符转换成另一种特定字符
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- github issues的操作
https://help.github.com/en/articles/searching-issues-and-pull-requests 根据 reporter筛选issues https://h ...
- dp暑假专题 训练记录
A 回文串的最小划分 题意:给出长度不超过1000的字符串,把它分割成若干个回文字串,求能分成的最少字串数. #include <iostream> #include <cstdio ...
- Java 类引入 学习记录规整
之前觉得声明一个类,再把另一个包内的声明数值用第一个类打印出来就可以了(加入引入包类) 结果发现是不对的 看了看demo 得出正确结果 ImportTest 被运行 引入下面的Import类 ...
- FAST UA API
参考: FAST_UA 编程手册 FAST DATA STRUCTURE fast_packet fast_metadata fast_rule fast_flow FAST UA API 1.fas ...
- 1、Python快速入门(0529)
学习来自马哥教育的视频,感谢马哥 编程语言: 用户: 问题空间 计算机:解决问题 解空间 抽象: 机器代码-->微码编程-->高级语言 (语言的高下级的是根据语言是否被人类容易理解或者更接 ...