Vue加入购物车判断token添加登录提示功能

addCart () {
      // 判断 token 是否存在
      // 1.如果token不存在，弹确认框
      // 2.如果token存在，继续请求操作
      if (!this.$store.getters.token) {
        // 弹确认框
        this.$dialog.confirm({
          title: '温馨提示',
          message: '此时需要先登录才能继续操作哦',
          confirmButtonText: '去登录',
          cancelButtonText: '再逛逛'
        })
          .then(() => {
            // 点击确认表示用户要去登录界面，此时让路由跳转
            // 如果希望，跳转到登录 =》登录后能回跳回来，需要在跳转去携带参数，（当前的路径地址）
            // this.$route.fullPath(会包含查询参数)
            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
    },
    // 切换状态
    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
      })
    },
    // 修改列表中的数量，根据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()
      // 后台返回的数据中，不包含复选框的选中状态，为了实现将来的的功能
      // 需要手动维护数据，给每一项，添加一个isChecked状态，（标记当前商品是否选中）
      list.forEach(item => {
        item.isChecked = true
      })
      console.log('list', list)
      // 调用mutations，实现对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: {
    // 求所有的商品累加总数
    cartTotal (state) {
      return state.cartList.reduce((sum, item) => sum + item.goods_num, 0)
    },
    // 选中的商品项
    selCartList (state) {
      return state.cartList.filter(item => item.isChecked)
    },
    // 对于getter来说，可以通过 getters 作为第二个参数去访问我们getters中定义的计算属性
    // 选中的总数
    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()
      }
    },
    // 切换选中状态
    toggleCheck (goodsId) {
      this.$store.commit('cart/toggleCheck', goodsId)
    },
    // 全选或反选
    toggleAllCheck () {
      this.$store.commit('cart/toggleAll', this.isAllChecked)
    },
    // 数字框点击事件
    async changeCount (goodsNum, goodsId, goodsSkuId) {
      // 调用 vuex 的action，进行数量修改
      this.$store.dispatch('cart/changeCountAction', {
        goodsNum,
        goodsId,
        goodsSkuId
      })
    }
  },
  data () {
    return {
    }
  },
  created () {
    this.init()
  }
}
</script>