vuex 간단 한 카 트 기능 실현

본 논문 의 사례 는 vuex 가 카 트 기능 을 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
파일 디 렉 터 리 는 다음 과 같 습 니 다.

카 트 구성 요소

<template>
    <div>
        <h1>vuex-shopCart</h1>
        <div class="shop-listbox">
            <shop-list />
        </div>
        <h2>    </h2>
        <div class="shop-cartbox">
            <shop-cart />
        </div>
    </div>
</template>

<script>
import shoList from './shop-list'
import shopCart from './shop-cart'

export default {
  name: 'shop',
  components: {
      'shop-list' : shoList,
      'shop-cart' : shopCart
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

상품 목록

<template>
    <div class="shop-list">
        <table>
            <tr class="shop-listtitle">
                <td>id</td>
                <td>  </td>
                <td>  </td>
                <td>  </td>
            </tr>
            <tr v-for = "item in shopList" class="shop-listinfo" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>
                    <button @click="addToCart(item)">     </button>
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
import {mapGetters,mapActions} from "vuex";
export default {
    name : 'shopList',
    computed: {
        ...mapGetters({
                shopList:'getShopList',
            })
    },
    methods: {
        ...mapActions(['addToCart'])
    },
}
</script>

상품 목록 선택

<template>
    <div class="shop-list">
        <table>
            <tr class="shop-listtitle">
                <td>id</td>
                <td>  </td>
                <td>  </td>
                <td>  </td>
                <td>  </td>
            </tr>
            <tr v-for="item in cartData" class="shop-listinfo" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>{{item.num}}</td>
                <td><button class="shop-dele dele-btn" @click="deleteShop(item)">  </button></td>
            </tr>
            <tr v-if="cartData.length <= 0">
                <td colspan="5">    </td>
            </tr>
            <tr>
                <td colspan="2">  :{{totalNum}}</td>
                <td colspan="2">   :{{totalPrice}}</td>
                <td><button class="dele-cart dele-btn" @click="clearCart">     </button></td>
            </tr>
        </table>
    </div>
</template>

<script>
import {mapGetters,mapActions} from 'vuex'
export default {
    name : 'shopCart',
    data(){
        return{
            
        }
    },
    computed: {
        ...mapGetters({
            cartData:'addShopList',
            totalNum : 'totalNum',
            totalPrice:'totalPrice'
        })
    },
    methods: {
        ...mapActions({
            clearCart:'clearToCart',
            deleteShop:"deletToShop"
        })
    }
}
</script>

vuex 생 성
npm install vuex--save,vuex 폴 더 를 만 들 고 폴 더 에 store.js 를 만 들 고 vuex 를 도입 합 니 다.
store.js

import Vue from "vue"
import Vuex from 'vuex'
import cart from './modules/cart'

Vue.use(Vuex)

export default new Vuex.Store({
    modules: {
        cart
    }
})

모듈 폴 더 modules 를 만 들 고 store 모듈 로 만 든 다음 기본 출력 을 store.js 에 도입 합 니 다.
cart.js

const state = {
    shop_list: [{
        id: 11,
        name: '    ',
        price : 12
    }, {
            id: 22,
            name: '    ',
            price : 14
        }, {
            id: 34,
            name: '   ',
            price : 10
        }, {
            id: 47,
            name: '  ',
            price : 2
        }, {
            id: 49,
            name: '    ',
            price : 13
        }, {
            id: 50,
            name: '     ',
            price : 15
        }],
        add : []
}

const getters = {
    //       
    getShopList: state => state.shop_list,
    //        
    addShopList: state => {
        // map()         ，                      
        return state.add.map(({ id, num }) => {
            let product = state.shop_list.find(n => n.id == id)// find()        (     )           ，             undefined
            if (product) {//           
                return {//      
                    ...product,
                    num
                }
            }
        })
    },
     //      
     totalNum: (state, getters) => {
         let total = 0
         getters.addShopList.map(n => { 
             total += n.num
         })
         return total
    },
    //      
    totalPrice: (state, getters) => { 
        let total = 0
        getters.addShopList.map(n => { 
            total += n.num * n.price
        })
        return total
    }
},

const actions = {
    //      
    addToCart({ commit},product) { 
        commit('addCart', {
            id : product.id
        })
    },
    //      
    clearToCart({ commit}) { 
        commit('clearCart')
    },
    //       
    deletToShop({ commit},product) { 
        commit('deletShop',product)
    }
}

const mutations = {
    //      
    addCart(state, { id}){ 
        let record = state.add.find(n => n.id == id)
        if (!record) {//               
            state.add.push({//      
                id,
                num : 1
            })
        } else { //            ，     
            record.num++
        }
    },
    //       
    deletShop(state, product) { 
        state.add.forEach((item,i) => { 
            if (item.id == product.id) {//          
                state.add.splice(i,1)
            }
        })
    },
    //      
    clearCart(state) { 
        state.add = []
    }
}

export default {
    state,
    getters,
    actions,
    mutations
}

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.