这篇“如何用vuex代码实现简单的购物车功能”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“如何用vuex代码实现简单的购物车功能”文章吧。
在泗洪等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供成都网站制作、网站设计 网站设计制作按需规划网站,公司网站建设,企业网站建设,成都品牌网站建设,成都全网营销,成都外贸网站建设公司,泗洪网站建设费用合理。
文件目录如下:
购物车组件
vuex-shopCart
已选商品
商品列表
id 名称 价格 操作 {{item.id}} {{item.name}} {{item.price}}
选中商品列表
id 名称 价格 数量 操作 {{item.id}} {{item.name}} {{item.price}} {{item.num}} 暂无数据 总数:{{totalNum}} 总价格:{{totalPrice}}
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代码实现简单的购物车功能”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。