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

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

文件目录如下：

购物车组件

商品列表

选中商品列表

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怎么实现简单的购物车功能"这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注行业资讯频道。