一、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: {}
})

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

state: {
    car: []
}

3. 在 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)
      }

    }
  }

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

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

5. 在 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)
}

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

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

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

<router-link class="mui-tab-item" to="/shopCar">
	<span class="mui-icon mui-icon-extra mui-icon-extra-cart">
		<span class="mui-badge" id="badge">{{ $store.getters.getAllCount }}</span>
	</span>
	<span class="mui-tab-label">购物车</span>
</router-link>

8. 在这样写以后会出现一个问题，当在页面刷新以后，购物车中的商品数量会清空，需要持久化保存，也就是需要本地存储技术，可以使用 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))
}

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

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