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

import { getCartList, updateCart } from '@/api/cart'
export default {
  namespaced: true,
  state () {
    return {
      cartList: [] // 購物車列表
    }
  },
  mutations: {
    // 提供一個修改 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: {
    // 獲取購物車列表
    async getCartListAction (content) {
      const { data: { list } } = await getCartList()
      // 后臺返回的數(shù)據(jù)中，不包含復選框的選中狀態(tài)，為了實現(xiàn)將來的的功能
      // 需要手動維護數(shù)據(jù)，給每一項，添加一個isChecked狀態(tài)，（標記當前商品是否選中）
      list.forEach(item => {
        item.isChecked = true
      })
      console.log('list', list)
      // 調(diào)用mutations，實現(xiàn)對state的修改
      content.commit('setCartList', list)
    },
    async changeCountAction (content, obj) {
      const { goodsNum, goodsId, goodsSkuId } = obj
      // 先本地修改
      content.commit('changeCount', { goodsId, goodsNum })
      // 在同步到后臺
      await updateCart(goodsId, goodsNum, goodsSkuId)
    }
  },
  getters: {
    // 求所有的商品累加總數(shù)
    cartTotal (state) {
      return state.cartList.reduce((sum, item) => sum + item.goods_num, 0)
    },
    // 選中的商品項
    selCartList (state) {
      return state.cartList.filter(item => item.isChecked)
    },
    // 對于getter來說，可以通過 getters 作為第二個參數(shù)去訪問我們getters中定義的計算屬性
    // 選中的總數(shù)
    selCartCount (state, getters) {
      return getters.selCartList.reduce((sum, item) => sum + item.goods_num, 0)
    },
    // 選中的總價
    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) {
        // 必須是登錄過的用戶，才能獲取購物車列表
        this.getCartListAction()
      }
    },
    // 切換選中狀態(tài)
    toggleCheck (goodsId) {
      this.$store.commit('cart/toggleCheck', goodsId)
    },
    // 全選或反選
    toggleAllCheck () {
      this.$store.commit('cart/toggleAll', this.isAllChecked)
    },
    // 數(shù)字框點擊事件
    async changeCount (goodsNum, goodsId, goodsSkuId) {
      // 調(diào)用 vuex 的action，進行數(shù)量修改
      this.$store.dispatch('cart/changeCountAction', {
        goodsNum,
        goodsId,
        goodsSkuId
      })
    }
  },
  data () {
    return {
    }
  },
  created () {
    this.init()
  }
}
</script>