vuex 在购物车中通过+添加商品时数量一直是2时的建议

如果购物车的存储方式为json数组,那么很可能是因为调用mapMutation修改num时传入的参数是通过mapState获取的数据。

解决办法:

在data中创建一个新的对象:object

data () {
    return {
      object: {
        id: Number,
        name: '',
        imgUrl: '',
        num: Number,
        price: '',
        selectState: Number
      }
    }
  },

将mapState中获取的数据放入object

this.object.id = this.array[index].id
this.object.imgUrl = this.array[index].imgUrl
this.object.name = this.array[index].name
this.object.num = 1
this.object.price = this.array[index].price
this.object.selectState = this.array[index].selectState

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
抱歉,我是一个AI语言模型,无法提供代码示例。但是,我可以简要介绍如何使用Vue3和Vuex实现购物车功能。 首先,需要在Vue3项目安装Vuex。可以使用以下命令: ```bash npm install vuex ``` 然后,在src目录下创建一个store.js文件来存储Vuex store实例。在store.js文件,需要导入Vue3和Vuex,并创建一个新的store实例。 ```javascript import { createStore } from 'vuex' const store = createStore({ state: { cart: [] }, mutations: { addToCart(state, item) { state.cart.push(item) }, removeFromCart(state, index) { state.cart.splice(index, 1) } }, getters: { cartTotal(state) { return state.cart.reduce((total, item) => total + item.price, 0) } } }) export default store ``` 在上面的代码,我们定义了一个状态对象state,其包含一个名为cart的数组。我们还定义了两个mutation,一个用于将商品添加购物车,另一个用于从购物车删除商品。最后,我们定义了一个getter,用于计算购物车商品的总价值。 在Vue3项目,可以通过以下方式将store实例传递给根组件: ```javascript import { createApp } from 'vue' import App from './App.vue' import store from './store' createApp(App).use(store).mount('#app') ``` 现在,我们已经将store实例传递给了根组件,可以在组件使用Vuex的状态管理功能。例如,在组件添加商品购物车的代码可以如下所示: ```javascript <button @click="addToCart(item)">Add to Cart</button> ... methods: { addToCart(item) { this.$store.commit('addToCart', item) } } ``` 在上面的代码,我们将addToCart方法映射到一个按钮的点击事件上。当用户点击按钮,我们将商品对象作为参数传递给addToCart方法,并使用commit方法将该操作提交给store。Vuex会在store执行addToCart mutation,并将商品对象添加到cart数组。 同样,我们可以使用Vuex的getter来计算购物车商品的总价值: ```javascript <template> <div> <p>Cart Total: {{ cartTotal }}</p> </div> </template> <script> export default { computed: { cartTotal() { return this.$store.getters.cartTotal } } } </script> ``` 在上面的代码,我们使用computed属性将cartTotal getter映射到组件的模板。当cart数组商品数量发生变化,cartTotal getter会重新计算购物车商品的总价值,并将其更新到模板。 以上是使用Vue3和Vuex实现购物车功能的基本流程,具体实现方式可能因项目而异。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值