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;
}
