Vue-加入购物车-判断token添加登录提示
目标：给未登录的用户，添加登录提示
说明：加入购物车，是一个登录后的用户 才能进行的操作，所以需要进行鉴权判断，判断用户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('正常请求')
}
当用户点击去登录后：页面会封装成一个请求参数到login界面，随后要在login界面中通过路由的方式去判单是否有回调url，如果有则登录成功后回到当前界面。
对于一些后端接口，尤其是用户权限等，我们需要在请求头中携带token信息，对此在请求拦截器上进行配置
基于vuex管理购物车模块
说明：购物车 数据联动关系较多，且通常会封装一些小组件，所以为了便于维护，一般都会将购物车的数据基于vuex分模块管理
需求分析：
- 基本静态结构
- 构建vuex cart模块，获取数据存储
- 基于数据 动态渲染 购物车列表
- 封装getters 实现动态统计
- 全选反选功能
- 数字框修改数量功能
- 编辑切换状态，删除功能
- 空购物车处理
对于vuex cart模块来说：
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>