GIF.gif

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;

}