vue 中如何通过Vuex实现购物车功能

小咪咪 2023-07-24 09:26 13阅读 0赞

#### 一、vue结合vuex实现购物车功能 ####

1.  在 `main.js` 文件中， 引入 `vuex`，并且注册 `vuex`，使用 `vuex` 中的 `Store` 对象，代码如下所示：

// 引入并注册 vuex
    import Vuex from 'vuex'
    Vue.use(Vuex)
    var store = new Vuex.Store({ 
        state: { },
        mutations: { },
        getters: { }
    })

1.  在 `state` 中，是存放数据的，可以通过 `this.$store.state`去改变。在这里，将购物车中的商品数据，用一个数组存储起来，在 `car`数组中，存储一些商品的对象。这个对象可以设计成 `{ id:商品的id, count: 要购买的数量, price: 商品的单价，selected: false }` 这样，state 中的代码如下所示：

state: { 
        car: []
    }

1.  在 `mutations` 中， 是存放修改 `state` 数据的方法，可以通过 `this.$store.commit('方法的名称', '按需传入的唯一参数')`去改变。在这里，我们可以先设计一个 `addCar(state, goodsInfo)` 方法，击加入购物车，会将信息保存到 `store` 中的 `car`。对于添加进购物车的方法，我们可以分析两种情况：

*  如果购物车中，之前已经有了这个对应的商品，那么就只需要更新商品的数量
 *  如果购物车中没有，那么就 `push` 添加到`car` 数组中

所以，由此我们判断购物车中有无添加的商品。为了区分，一开始假设在购物车中没有找到对应的商品，`flag` 的值可以用来区分购物车中是否存在对应的商品。当购物车对应商品已存在,修改数量，并且将 flag 的值设置为 `true`。如果 `flag` 还是 `false` ，说明购物车对应商品不存在，`push` 添加到 `car`中。代码如下所示：

mutations: {  
        // 点击加入购物车，会将信息保存到 store 中的 car
        addCar(state, goodsInfo) { 
         
          var flag = false
    
          state.car.some(item => { 
            if (item.id === goodsInfo.id) { 
              item.count += parseInt(goodsInfo.count)
              flag = true
              return true
            }
          })
    
          if (!flag) { 
            state.car.push(goodsInfo)
          }
    
        }
      }

1.  在点击加入购物车的过程中，绑定一个 `click` 点击事件，`addToShopCar`，代码如下所示：

<mt-button type="danger" size="small" @click="addToShopCar">加入购物车</mt-button>

1.  在 `methods` 中，定义 `addToShopCar` 方法。对于商品对象的形式是 `{ id:商品的id, count: 要购买的数量, price: 商品的单价，selected: false }`，所以拼接出一个，要保存到 `store` 中 `car` 数组里的商品信息对象，然后 调用 `store` 中的 `mutations` 的 `addCar` 来将商品加入购物车，代码如下所示：

// 点击添加到购物车
    addToShopCar () { 
        this.ballFlag = !this.ballFlag
        
        var goodsInfo = { 
            id: this.id,
            count: this.selectedCount,
            price: this.goodsInfo.sell_price,
            selected: true
        }
    
        this.$store.commit('addCar', goodsInfo)
    }

1.  对于底部 `tab` 栏中的 徽标的值，也会随着加入购物车的数量增加后，也会跟着一起变。我们可以利用 `vuex` 中的 `getters` 去计算徽标的数值，代码如下所示：

getters:{  
        // 计算徽标的数值
        getAllCount (state) { 
          var c = 0
          state.car.forEach(item => { 
            c += item.count
          })
          return c
        }
    }

1.  在徽标所处的位置中，可以通过 `$store.getters.getAllCount` 来获取`vue` 的`getters`到对应的购物车数量，代码如下所示：

<router-link class="mui-tab-item" to="/shopCar">
 	
 		{
 { $store.getters.getAllCount }}
 	
 	购物车
 </router-link>

1.  在这样写以后会出现一个问题，当在页面刷新以后，购物车中的商品数量会清空，需要持久化保存，也就是需要本地存储技术，可以使用 `localStorage`。在 `vuex` 中的 `addCar`，当更新 `car` 以后，会将 `car` 数组存储到本地的 `localStorage` 中。由于`localStorage` 只能存储字符串，不能存数组，`state.car` 为数组，需要通过 `JSON.stringify` 将数组转换为字符串，代码如下所示：

// 点击加入购物车，会将信息保存到 store 中的 car
    addCar(state, goodsInfo) { 
      var flag = false
    
      state.car.some(item => { 
        if (item.id === goodsInfo.id) { 
          item.count += parseInt(goodsInfo.count)
          flag = true
          return true
        }
      })
    
      if (!flag) { 
        state.car.push(goodsInfo)
      }
     
      localStorage.setItem('car', JSON.stringify(state.car))
    }

1.  在 main.js 中，每一次进入的时候，肯定会调用 `main.js` 在刚调用的时候，先从本地存储中，把 购物车的数据读出来，放到 `store` 中，代码如下所示：

var car = JSON.parse(localStorage.getItem('car') || '[]')