十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这期内容当中小编将会给大家带来有关使用vuex如何实现一个购物车功能,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
成都创新互联是一家从事企业网站建设、成都做网站、网站建设、外贸营销网站建设、行业门户网站建设、网页设计制作的专业网站建设公司,拥有经验丰富的网站建设工程师和网页设计人员,具备各种规模与类型网站建设的实力,在网站建设领域树立了自己独特的设计风格。自公司成立以来曾独立设计制作的站点上千余家。vue是什么Vue是一套用于构建用户界面的渐进式JavaScript框架,Vue与其它大型框架的区别是,使用Vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。
购物车组件
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;
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中引入;
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 => { return state.add.map(({id,num})=>{ let product = state.shop_list.find(n => n.id == id); 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如何实现一个购物车功能了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联行业资讯频道。