php如何实现购物时数量增减,1、vuex状态管理--购物车数量增减
GIF.gif
1、購物車數量增減
-
+
import { mapState,mapMutations} from 'vuex' //引入mapState、mapMutations映射函數
export default{
computed:{
...mapState({
changableNum:state => state.headerStatus.changableNum, //用模塊headerStatus里的狀態 changableNum
disabled:state => state.headerStatus.disabled
}),
methods:{
...mapMutations(['increaseNum','decreaseNum'])
}
}
vuex -- headerStatus.js模塊 存放路徑：store/modules/headerStatus.js
const state = {
changableNum:1,
disabled:true
}
const getters = {
}
const mutations = {
increaseNum(state,num){ //changableNum增加一個數
state.changableNum += num;
if(state.changableNum >1){
state.disabled = false;
}else{
state.disabled = true;
}
},
decreaseNum(state,num){ //changableNum減少一個數
if(state.changableNum > 1 ){
state.changableNum -= num;
if(state.changableNum <= 1 ){
state.disabled = true;
return false;
}
}
}
}
const actions = {
}
export default {
state,
getters,
mutations,
actions
}
這是store 文件夾下的index.js
用modules寫法
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import headerStatus from './modules/headerStatus'
export default new Vuex.Store({
modules:{
headerStatus
}
})
css樣式
.quantity{
position:relative;
display:inline-block;
width:80px;
height:22px;
background:#fff;
}
.increment,.decrement{
display:inline-block;
width:16px;
height:18px;
background:#fff;
border:1px solid #ccc;
color:#666;
padding:1px 0;
text-align:center;
}
.increment{
float:right;
border-left:0px;
}
.decrement{
float:left;
border-right:0;
}
.iTxt{
position:absolute;
left:17px;
top:0px;
display:inline-block;
width:42px;
height:18px;
line-height:18px;
border:1px solid #ccc;
text-align:center;
font-size:12px;
padding:1px;
}
.disabled{
color:#eee;
}
總結
以上是生活随笔為你收集整理的php如何实现购物时数量增减,1、vuex状态管理--购物车数量增减的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android手机浏览器研究报告,QQ浏
- 下一篇： window10怎么卸载php,wind