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状态管理--购物车数量增减的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。