vuex怎么实现简单的购物车功能

这篇“vuex怎么实现简单的购物车功能”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vuex怎么实现简单的购物车功能”文章吧。

创新互联公司主要从事成都做网站、成都网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务崇仁,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108

文件目录如下：

购物车组件

商品列表

选中商品列表

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
}

以上就是关于“vuex怎么实现简单的购物车功能”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注创新互联行业资讯频道。