[TOC]
注意下面都需要引入vuex.js
#### 1.vuex之vuex的使用場景分析與state購物車實例講解
注意需要引入vuex.js
<div id="hdcms">
<lists></lists>
</div>
<script type="text/x-template" id="Lists">
<div>
<table border="1" width="90%">
<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>
let Lists = {
template: '#Lists',
computed: {
totalPrice(){
return this.$store.state.totalPrice;
},
goods(){
return this.$store.state.goods;
}
}
}
let store = new Vuex.Store({
state: {
totalPrice: 100,
goods: [
{id: 1, title: 'iphone7Plus', price: 399},
{id: 2, title: 'hdcms系統', price: 1999},
]
}
});
var app = new Vue({
el: '#hdcms',
store,
components: {
Lists
}
})
</script>
#### 2.vuex之使用getters高效的獲取購物車商品總價
<div id="hdcms">
<lists></lists>
</div>
<script type="text/x-template" id="Lists">
<div>
<h1>購物車</h1>
<table border="1" width="90%">
<tr>
<th>編號</th>
<th>名稱</th>
<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>
<td>{{v.num}}</td>
<td></td>
</tr>
</table>
<h1>總價: {{totalPrice}}</h1>
</div>
</script>
<script>
let Lists = {
template: '#Lists',
computed: {
totalPrice(){
return this.$store.getters.totalPrice;
},
goods(){
return this.$store.state.goods;
}
}
}
let store = new Vuex.Store({
state: {
goods: [
{id: 1, title: 'iphone7Plus', price: 399, num: 3},
{id: 2, title: 'hdcms系統', price: 1999, num: 6},
]
},
getters: {
//獲取商品總價
totalPrice: state => {
let totalPrice = 0;
state.goods.forEach((v) => {
totalPrice += v.num * v.price;
})
return totalPrice;
}
}
});
var app = new Vue({
el: '#hdcms',
store,
components: {
Lists
}
})
</script>
#### 3.vuex之使用getters計算每一件購物車中商品的總價
<div id="hdcms">
<lists></lists>
</div>
<script type="text/x-template" id="Lists">
<div>
<h1>購物車</h1>
<table border="1" width="90%">
<tr>
<th>編號</th>
<th>名稱</th>
<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>
<td>{{v.num}}</td>
<td>{{v.totalPrice}}</td>
</tr>
</table>
<h1>總價: {{totalPrice}}</h1>
</div>
</script>
<script>
let Lists = {
template: '#Lists',
computed: {
totalPrice(){
return this.$store.getters.totalPrice;
},
goods(){
return this.$store.getters.goods;
}
}
}
let store = new Vuex.Store({
state: {
goods: [
{id: 1, title: 'iphone7Plus', price: 300, num: 3},
{id: 2, title: 'hdcms系統', price: 1999, num: 6},
]
},
getters: {
//獲取商品總價
totalPrice: state => {
let totalPrice = 0;
state.goods.forEach((v) => {
totalPrice += v.num * v.price;
})
return totalPrice;
},
//獲取商品并計算每件商品的總價
goods(state){
let goods = state.goods;
goods.forEach((v)=>{
v.totalPrice = v.num*v.price;
});
return goods;
}
}
});
var app = new Vue({
el: '#hdcms',
store,
components: {
Lists
}
})
</script>
#### 4.vuex之將購物車底部生成新組件用于統計總價
<div id="hdcms">
<lists></lists>
<footer-cart></footer-cart>
</div>
<script type="text/x-template" id="Lists">
<div>
<h1>購物車</h1>
<table border="1" width="90%">
<tr>
<th>編號</th>
<th>名稱</th>
<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>
<td>
<input type="text" v-model="v.num">
</td>
<td>{{v.totalPrice}}</td>
</tr>
</table>
</div>
</script>
<script type="text/x-template" id="footerCart">
<div class="footerCart">
總計: {{totalPrice}}
</div>
</script>
<style>
.footerCart{background: #999;color:#fff;}
</style>
<script>
let Lists = {
template: '#Lists',
computed: {
goods(){
return this.$store.getters.goods;
}
}
}
let footerCart={
template:'#footerCart',
computed:{
totalPrice(){
return this.$store.getters.totalPrice;
}
}
}
let store = new Vuex.Store({
state: {
goods: [
{id: 1, title: 'iphone7Plus', price: 300, num: 3},
{id: 2, title: 'hdcms系統', price: 1999, num: 6},
]
},
getters: {
//獲取商品總價
totalPrice: state => {
let totalPrice = 0;
state.goods.forEach((v) => {
totalPrice += v.num * v.price;
})
return totalPrice;
},
//獲取商品并計算每件商品的總價
goods(state){
let goods = state.goods;
goods.forEach((v)=>{
v.totalPrice = v.num*v.price;
});
return goods;
}
}
});
var app = new Vue({
el: '#hdcms',
store,
components: {
Lists,footerCart
}
})
</script>
#### 5.vuex之使用mutations修改購物車倉庫數據
<div id="hdcms">
<lists></lists>
<footer-cart></footer-cart>
</div>
<script type="text/x-template" id="Lists">
<div>
<h1 v-if="goods.length==0">購物車中沒有商品,<a href="http://www.baidu.com">去購物吧...</a></h1>
<div v-if="goods.length>0">
<h1>購物車</h1>
<table border="1" width="90%">
<tr>
<th>編號</th>
<th>名稱</th>
<th>價格</th>
<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>
<td>
<input type="text" v-model="v.num">
</td>
<td>{{v.totalPrice}}</td>
<td>
<button @click="del(v.id)">刪除</button>
</td>
</tr>
</table>
</div>
</div>
</script>
<script type="text/x-template" id="footerCart">
<div class="footerCart">
<div v-if="totalPrice>0">
總計: {{totalPrice}}
</div>
</div>
</script>
<style>
.footerCart{background: #999;color:#fff;}
</style>
<script>
let Lists = {
template: '#Lists',
computed: {
goods(){
return this.$store.getters.goods;
}
},
methods:{
del(id){
this.$store.commit('del',{id})
}
}
}
let footerCart={
template:'#footerCart',
computed:{
totalPrice(){
return this.$store.getters.totalPrice;
}
}
}
let store = new Vuex.Store({
state: {
goods: [
{id: 1, title: 'iphone7Plus', price: 300, num: 3},
{id: 2, title: 'hdcms系統', price: 1999, num: 6},
]
},
getters: {
//獲取商品總價
totalPrice: state => {
let totalPrice = 0;
state.goods.forEach((v) => {
totalPrice += v.num * v.price;
})
return totalPrice;
},
//獲取商品并計算每件商品的總價
goods(state){
let goods = state.goods;
goods.forEach((v)=>{
v.totalPrice = v.num*v.price;
});
return goods;
}
},
mutations:{
//刪除購物車中的商品
del(state,param){
let k;
for(let i=0;i<state.goods.length;i++){
if(state.goods[i].id==param.id){
k=i;break;
}
}
state.goods.splice(k,1);
}
}
});
var app = new Vue({
el: '#hdcms',
store,
components: {
Lists,footerCart
}
})
</script>
#### 6.vuex之使用actions與axios異步初始購物車數據
需要引入vuex.js 和axios.js
<div id="hdcms">
<lists></lists>
<footer-cart></footer-cart>
</div>
<script type="text/x-template" id="Lists">
<div>
<h1 v-if="goods.length==0">購物車中沒有商品,<a href="http://www.baidu.com">去購物吧...</a></h1>
<div v-if="goods.length>0">
<h1>購物車</h1>
<table border="1" width="90%">
<tr>
<th>編號</th>
<th>名稱</th>
<th>價格</th>
<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>
<td>
<input type="text" v-model="v.num">
</td>
<td>{{v.totalPrice}}</td>
<td>
<button @click="del(v.id)">刪除</button>
</td>
</tr>
</table>
</div>
</div>
</script>
<script type="text/x-template" id="footerCart">
<div class="footerCart">
<div v-if="totalPrice>0">
總計: {{totalPrice}}
</div>
</div>
</script>
<style>
.footerCart {
background: #999;
color: #fff;
}
</style>
<script>
let Lists = {
template: '#Lists',
computed: {
goods(){
return this.$store.getters.goods;
}
},
methods: {
del(id){
this.$store.commit('del', {id})
}
}
}
let footerCart = {
template: '#footerCart',
computed: {
totalPrice(){
return this.$store.getters.totalPrice;
}
}
}
let store = new Vuex.Store({
state: {
goods: []
},
getters: {
//獲取商品總價
totalPrice: state => {
let totalPrice = 0;
state.goods.forEach((v) => {
totalPrice += v.num * v.price;
})
return totalPrice;
},
//獲取商品并計算每件商品的總價
goods(state){
let goods = state.goods;
goods.forEach((v) => {
v.totalPrice = v.num * v.price;
});
return goods;
}
},
mutations: {
//刪除購物車中的商品
del(state, param){
let k;
for (let i = 0; i < state.goods.length; i++) {
if (state.goods[i].id == param.id) {
k = i;
break;
}
}
state.goods.splice(k, 1);
},
setGoods(state,param){
state.goods=param.goods;
}
},
actions: {
loadGoods(store){
axios.get('73.php').then(function (response) {
store.commit('setGoods',{goods:response.data})
console.log(response);
});
}
}
});
var app = new Vue({
el: '#hdcms',
store,
components: {
Lists, footerCart
},
mounted(){
this.$store.dispatch('loadGoods');
}
})
</script>
php代碼:
<?php
$data = [
['id' => 1, 'title' => 'iphone7Plus', 'price' => 300, 'num' => 3],
['id' => 2, 'title' => 'hdcms系統', 'price' => 1999, 'num' => 9],
];
echo json_encode($data);
#### 7.vuex之模塊化modules開發實例講解
需要引入vuex.js 和axios.js
當使用命名空間的時候,模塊里面的getters,mutations,actions,就不是全局了。
<div id="hdcms">
<lists></lists>
<footer-cart></footer-cart>
</div>
<script type="text/x-template" id="Lists">
<div>
<h1 v-if="goods.length==0">購物車中沒有商品,<a href="http://www.baidu.com">去購物吧...</a></h1>
<div v-if="goods.length>0">
<h1>購物車</h1>
<table border="1" width="90%">
<tr>
<th>編號</th>
<th>名稱</th>
<th>價格</th>
<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>
<td>
<input type="text" v-model="v.num">
</td>
<td>{{v.totalPrice}}</td>
<td>
<button @click="del(v.id)">刪除</button>
</td>
</tr>
</table>
</div>
</div>
</script>
<script type="text/x-template" id="footerCart">
<div class="footerCart">
<div v-if="totalPrice>0">
總計: {{totalPrice}}
</div>
</div>
</script>
<style>
.footerCart {
background: #999;
color: #fff;
}
</style>
<script>
let Lists = {
template: '#Lists',
computed: {
goods(){
// console.log(this.$store.state.cart.goods);
return this.$store.getters['cart/goods']
}
},
methods: {
del(id){
this.$store.commit('del', {id})
}
}
}
let footerCart = {
template: '#footerCart',
computed: {
totalPrice(){
return this.$store.getters['cart/totalPrice'];
}
}
}
const cartModule = {
namespaced:true,
state: {
goods: [{id:12}]
},
getters: {
//獲取商品總價
totalPrice: state => {
let totalPrice = 0;
state.goods.forEach((v) => {
totalPrice += v.num * v.price;
})
return totalPrice;
},
//獲取商品并計算每件商品的總價
goods(state){
let goods = state.goods;
goods.forEach((v) => {
v.totalPrice = v.num * v.price;
});
return goods;
}
},
mutations: {
//刪除購物車中的商品
del(state, param){
let k;
for (let i = 0; i < state.goods.length; i++) {
if (state.goods[i].id == param.id) {
k = i;
break;
}
}
state.goods.splice(k, 1);
},
setGoods(state,param){
state.goods=param.goods;
}
},
actions: {
loadGoods(store){
axios.get('73.php').then(function (response) {
store.commit('setGoods',{goods:response.data})
console.log(response);
});
}
}
}
let store = new Vuex.Store({
modules:{
cart:cartModule
}
});
var app = new Vue({
el: '#hdcms',
store,
components: {
Lists, footerCart
},
mounted(){
this.$store.dispatch('cart/loadGoods');
}
})
</script>
- html&jquery網頁特效
- 標簽分類及特點
- 關于文字標簽
- 網頁定時跳轉
- css透明度和插件
- 0.前端常用工具
- 1.tab切換效果
- 2.tab切換效果多個代碼復用
- 3.百度新聞導航條效果
- 4.解決鼠標移入過快的問題
- 5.滾動條位置
- 6.元素尺寸
- 7.全選反選操作
- 8.固定定位
- 9.開關效果
- 10.節點操作
- 11.仿小米商品展示效果
- 12.仿小米商品展示效果復用
- 13.固定導航欄效果
- 14.凡客輪播圖效果
- 15.頂部下滑廣告效果
- 16.京東左右滑動輪播圖
- 17.京東左右滑動無縫輪播圖
- 18.選擇器
- 19.篩選
- 20.開關效果
- 21.滑動效果
- 22.小米商品效果css實現
- 23.元素水平垂直居中
- laravel5.6
- LARAVEL 介紹&安裝
- javascript & css 腳手架
- php常用工具類
- 安裝laravel-ide-helper增強代碼提示
- 使用migration創建表和數據填充
- 解決mysql5.7以下laravel不能執行數據遷移的問題
- 路由
- 登陸操作自定義模型
- 使用中間件middleware進行登錄權限驗證
- 進行表單驗證處理
- 使用laracasts-flash定制消息提示
- 資源路由
- 寶塔面板安裝fileinfo擴展
- laravel上傳處理與使用hdjs快速實現前端上傳組件
- thinkphp
- phpstorm
- phpstorm安裝插件
- 定義快捷鍵
- 關閉提示
- 將代碼實時同步到遠程服務器
- sublime
- composer
- git使用
- git安裝和配置作者信息
- git新建項目和維護項目
- git日志操作
- git別名操作
- git分支操作
- git生成發布壓縮包
- git系統別名
- gitrebase操作
- 使用SSH與GITHUB遠程服務器進行無密碼連接
- 本地版本庫主動使用remote與遠程GITHUB進行關聯
- 本地分支與GITHUB遠程分支同步
- 項目實戰-新入職員工參與項目開發時分支使用
- 自動部署
- ios開發
- linux
- 1.centos6.5 mysql忘記登入密碼
- html5
- 標簽
- 表單
- 音頻與視頻
- webstorage儲存
- canvas
- css3
- 01.CSS3布局
- 02.transition動畫
- 03.animation動畫
- 04.flex彈性盒模型
- Less
- gulpjs
- es6
- ES6模塊化
- let和const命令
- ES6函數擴展&解構賦值
- JavaScript之數據遍歷
- class類
- Set和Map數據結構
- Vue
- 1.創建第一個應用
- 2.屬性動態綁定
- 3.表達式
- 4.解決phpstorm不識別ECMASCRIPT6語法的問題
- 5.watch監聽屬性
- 6.使用object與array控制class
- 7.條件渲染
- 8.循環
- 9.變異方法
- 10.事件
- 11.表單
- 12.組件
- 13.css過渡動
- 14.js庫控制vue過渡動作
- 15.自定義指令directive
- 16.使用vue-cli初始化單頁面應用
- 17.Vue-router路由
- 18.vuex
- 19.vue-cli
- webpack
- zanui
- nodejs