首页 > 其他分享 >Vue / uniapp cart.js购物车

Vue / uniapp cart.js购物车

时间:2023-06-21 22:11:37浏览次数:40  
标签:count uniapp Vue cart 购物车 state goods id store

 

 

const cart = {
    namespaced: true,
    state: { 
        //{"store_id":"","goods_id":"", "goods_name":"", "goods_price":"", "goods_count":"", "goods_small_logo":"", "goods_state":""}
        cart: []
    },
    mutations: {
        add(state, goods) {
            let good = state.cart.find(s => s.store_id == goods.store_id && s.goods_id == goods.goods_id)
            if (good) {
                good.goods_count = goods.goods_count;
            } else {
                state.cart.push(goods);
            } 
            uni.setStorageSync("cart", state.cart)
        },
        sub(state, goods) {
            if (goods.goods_count === 0) {
                var index = state.cart.findIndex(s => s.store_id == goods.store_id && s.goods_id == goods.goods_id);
                state.cart.splice(index, 1);
            } else {
                let good = state.cart.find(s => s.store_id == goods.store_id && s.goods_id == goods.goods_id)
                if (good) {
                    good.goods_count = goods.goods_count;
                }
            } 
            uni.setStorageSync("cart", state.cart)
        }
    },
    actions: {

    },
    getters: { 
        getStoreCount: (state) => (store_id) => {
            var items = state.cart.filter(s => s.store_id == store_id)
            let count=0;
            items.forEach(s => {
                count += s.goods_count;
            })
            return count;
        } 
    },
}
export default cart

 

 

this.$store.getters['cart/getStoreCount'](model.store_id);

 

标签:count,uniapp,Vue,cart,购物车,state,goods,id,store
From: https://www.cnblogs.com/valeb/p/17497217.html

相关文章

  • vue3 虚拟滚动的一些实践
    看到这个vueuse库打开新天地后,看到一句warning:Considerusing vue-virtual-scroller instead,ifyouarelookingformorefeatures.于是用起来。好用,前提是看懂文档业务需要使用grid,它的grid竟然不是css,而是js计算//tempalte<RecycleScroller:ref="(el)......
  • vue3 - onMounted 多次触发 - 解决
    1.原因<router-view>外面使用了 <keep-alive>导致多次触发 onMounted生命周期2.解决使用<keep-alive>的第一层页面初始化数据的生命周期应该放弃使用 onMounted 应该使用onActivated用法与 onMounted 是一样的 ......
  • 自动化平台总结(httprunner+djangorestframework+python3+Mysql+Vue)【基础构思】
    一、前言最近从零搭建了一个自动化测试平台,虽然不是第一次从零搭建,但是也从来没有进行过这类搭建的总结,还是记录一下,搭建过程中的一些问题和方法。方便以后总结和翻阅二、简介搭建的平台使用的是Python3.6,未来有空可能考虑加个java版本。前端用的Vue,主体是httprunner2.......
  • Vue的set主要是做什么的
    这个时候可以用this.$set(),给新添加的对象属性,或数组元素添加getter,setter方法简单说即是:当你发现你给对象加了一个属性,在控制台能打印出来,但是却没有更新到视图上时,也许这个时候就需要用到this.$set()这个方法了methods:{btn(){Vue.set(this.student,'age......
  • vue中的data为什么是一个函数
    Vue中的data必须是个函数,因为当data是函数时,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,实例化几次就分配几个内存地址,他们的地址都不一样,所以每个组件中的数据不会相互干扰,改变其中一个组件的状态,其它组件不变。简单来说,就是......
  • Vue项目优化
    代码层面的优化v-if和v-show区分使用场景computed和watch区分使用场景v-for遍历必须为item添加key,且避免同时使用v-if长列表性能优化事件的销毁图片资源懒加载路由懒加载第三方插件的按需引入优化无限列表性能服务端渲染SSRor预渲染......
  • Vue单项数据流是什么
    父级prop的更新会向下流动到子组件中,但是反过来则不行,防止从子组件意外改变父级组件的状态每次父级组件发生更新时,子组件中所有的prop都将会刷新为最新的值子组件想修改时,只能通过$emit派发一个自定义事件,父组件接收到后,由父组件修改 ......
  • ant design vue的customRender()方法中使用$createElement提示undefined
    antdesignvue的customRender()方法中使用$createElement提示undefined报错信息如下:TypeError:Cannotreadpropertiesofundefined(reading'$createElement')原因:如果index.vue文件中是从另一个columns.js的文件中引用的列配置,在columns.js文件中的customRender()方法中使......
  • 【vue3】实现el-tree组件
     禾小毅csdn博客【vue3】实现el-tree组件,将不同层级的箭头修改成自定义图标的组件封装及调用【vue3】实现简易的“百度网盘”文件夹的组件封装实现【vue3】实现公共搜索组件,在当前页搜索的路由跳转不能改变当前值的操作,使用bus/event-emitter派发器......
  • vue WebUploader 分块上传
    ​文件夹数据库处理逻辑public class DbFolder{    JSONObjectroot;       public DbFolder()    {        this.root= new JSONObject();        this.root.put("f_id", "");        this.root.put("f_nameLoc", "根......