vuex实现购物车功能

最新推荐文章于 2021-09-10 17:10:51 发布

原创

最新推荐文章于 2021-09-10 17:10:51 发布 · 868 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了如何在Vue项目中利用vuex实现购物车功能，包括vuex的核心概念：state、getters、mutations和actions。重点讲解了mutations用于改变state状态，并展示了template和JS代码示例，说明了在mutations中定义的函数需要通过this.$store.commit触发。虽然未展示页面刷新或数据变更的演示，但指出由于使用vuex，购物车商品信息将得到持久保存。

vuex实现购物车功能：

一：今天用vue中的vuex实现简单的购物车功能：
首先项目中必须要有vuex（我的项目中已安装）

话不多说直接上代码：


state:{
   
   
 goods: [],

}
  mutations: {
   
   
    
    addCarts(state, goods) {
   
   
      let rel = true;
      state.goods.map(item => {
   
   
        if (item.goods.id == goods.id) {
   
   
          item.num++;
          rel = false
        }
      })
      if (rel) {
   
   
        state.goods.push({
   
   
         goods,
          num: 1,
        }
        )
      }

    },
    del(state,index){
   
   
      state.goods.splice(index,1)
    }

  },

vuex中有几个核心概念包括：state getters（计算属性） mutations actions modules 期中 mutations主要用来改变state中的状态

tempalte代码：

  <van-nav-bar title="我的购物车" left

最低0.47元/天解锁文章