addCart () {
      // 判斷 token 是否存在
      // 1.如果token不存在，彈確認(rèn)框
      // 2.如果token存在，繼續(xù)請(qǐng)求操作
      if (!this.$store.getters.token) {
        // 彈確認(rèn)框
        this.$dialog.confirm({
          title: '溫馨提示',
          message: '此時(shí)需要先登錄才能繼續(xù)操作哦',
          confirmButtonText: '去登錄',
          cancelButtonText: '再逛逛'
        })
          .then(() => {
            // 點(diǎn)擊確認(rèn)表示用戶要去登錄界面，此時(shí)讓路由跳轉(zhuǎn)
            // 如果希望，跳轉(zhuǎn)到登錄 =》登錄后能回跳回來(lái)，需要在跳轉(zhuǎn)去攜帶參數(shù)，（當(dāng)前的路徑地址）
            // this.$route.fullPath(會(huì)包含查詢參數(shù))
            this.$router.replace({
              path: '/login',
              query: {
                backUrl: this.$route.fullPath
              }
            })
          })
          .catch(() => {
            // on cancel
          })
        return
      }
      console.log('正常請(qǐng)求')
    }

import { getCartList, updateCart } from '@/api/cart'
export default {
  namespaced: true,
  state () {
    return {
      cartList: [] // 購(gòu)物車列表
    }
  },
  mutations: {
    // 提供一個(gè)修改 cartList 的方法
    setCartList (state, payload) {
      state.cartList = payload
    },
    setCartTotal (state, payload) {
      state.cartTotal = payload
    },
    // 切換狀態(tài)
    toggleCheck (state, goodsId) {
      const goods = state.cartList.find(item => item.goods_id === goodsId)
      goods.isChecked = !goods.isChecked
    },
    // 全不選或全選
    toggleAll (state, isChecked) {
      state.cartList.forEach(item => {
        item.isChecked = !isChecked
      })
    },
    // 修改列表中的數(shù)量，根據(jù)id修改
    changeCount (state, { goodsId, goodsNum }) {
      const goods = state.cartList.find(item => item.goods_id === goodsId)
      goods.goods_num = goodsNum
    }
  },
  actions: {
    // 獲取購(gòu)物車列表
    async getCartListAction (content) {
      const { data: { list } } = await getCartList()
      // 后臺(tái)返回的數(shù)據(jù)中，不包含復(fù)選框的選中狀態(tài)，為了實(shí)現(xiàn)將來(lái)的的功能
      // 需要手動(dòng)維護(hù)數(shù)據(jù)，給每一項(xiàng)，添加一個(gè)isChecked狀態(tài)，（標(biāo)記當(dāng)前商品是否選中）
      list.forEach(item => {
        item.isChecked = true
      })
      console.log('list', list)
      // 調(diào)用mutations，實(shí)現(xiàn)對(duì)state的修改
      content.commit('setCartList', list)
    },
    async changeCountAction (content, obj) {
      const { goodsNum, goodsId, goodsSkuId } = obj
      // 先本地修改
      content.commit('changeCount', { goodsId, goodsNum })
      // 在同步到后臺(tái)
      await updateCart(goodsId, goodsNum, goodsSkuId)
    }
  },
  getters: {
    // 求所有的商品累加總數(shù)
    cartTotal (state) {
      return state.cartList.reduce((sum, item) => sum + item.goods_num, 0)
    },
    // 選中的商品項(xiàng)
    selCartList (state) {
      return state.cartList.filter(item => item.isChecked)
    },
    // 對(duì)于getter來(lái)說(shuō)，可以通過(guò) getters 作為第二個(gè)參數(shù)去訪問(wèn)我們getters中定義的計(jì)算屬性
    // 選中的總數(shù)
    selCartCount (state, getters) {
      return getters.selCartList.reduce((sum, item) => sum + item.goods_num, 0)
    },
    // 選中的總價(jià)
    selCartPrice (state, getters) {
      return getters.selCartList.reduce((sum, item) => sum + item.goods_num * item.goods.goods_price_min, 0).toFixed(2)
    },
    // 是否全選
    isAllChecked (state, getters) {
      return state.cartList.every(item => item.isChecked)
    }
  }
}

<script>
import CountBox from '@/components/CountBox'
import { mapActions, mapGetters, mapState } from 'vuex'
export default {
  name: 'CartPage',
  components: {
    CountBox: CountBox
  },
  computed: {
    ...mapState('cart', ['cartList']),
    ...mapGetters('cart', ['cartTotal', 'selCartCount', 'selCartPrice', 'selCartList', 'isAllChecked'])
  },
  methods: {
    ...mapActions('cart', ['getCartListAction']),
    init () {
      if (this.$store.getters.token) {
        // 必須是登錄過(guò)的用戶，才能獲取購(gòu)物車列表
        this.getCartListAction()
      }
    },
    // 切換選中狀態(tài)
    toggleCheck (goodsId) {
      this.$store.commit('cart/toggleCheck', goodsId)
    },
    // 全選或反選
    toggleAllCheck () {
      this.$store.commit('cart/toggleAll', this.isAllChecked)
    },
    // 數(shù)字框點(diǎn)擊事件
    async changeCount (goodsNum, goodsId, goodsSkuId) {
      // 調(diào)用 vuex 的action，進(jìn)行數(shù)量修改
      this.$store.dispatch('cart/changeCountAction', {
        goodsNum,
        goodsId,
        goodsSkuId
      })
    }
  },
  data () {
    return {
    }
  },
  created () {
    this.init()
  }
}
</script>