这是我参与8月更文挑战的第12天，活动详情查看：8月更文挑战

这是项目中遇到的问题

在后台系统中修改了商品的数据后，因为我们项目是单页的，所以把数据存在了localStorage中，然后根据localStorage中的数据来进行渲染，所以导致后台修改以后前端商品无法正常渲染页面上还是之前没修改之前的商品。之前的逻辑是先存进去，当你刷新后现先看你localStorage中有没有我要的数据，如果有的话，就不用修改数据，没有的话，进行赋值，然后再存。显然要修改过后的商品进行初始化的话，只能去比较两个商品有没有变化

我先循环了从接口拿到的商品数据，然后再找看local中有没有id一样的商品数据，然后两个进行比较

function CircularCommodity (state, tempCart) {
    let flag = true
    for (let i = 0; i < state.Option1List.length; i++) {
        const a = tempCart.GoodsList[0]._option1List.find(item => state.Option1List[i].id === item.id)
        if (!a) return false
        flag = GetCompare(state.Option1List[i], a)
        if (!flag) return false
    }
    for (let i = 0; i < state.Option2List.length; i++) {
        const a = tempCart.GoodsList[0]._option2List.find(item => state.Option2List[i].id === item.id)
        if (!a) return false
        flag = GetCompare(state.Option2List[i], a)
        if (!flag) return false
    }
    for (let i = 0; i < state.Option3List.length; i++) {
        const a = tempCart.GoodsList[0]._option3List.find(item => state.Option3List[i].id === item.id)
        if (!a) return false
        flag = GetCompare(state.Option3List[i], a)
        if (!flag) return false
    }
    if (state.GoodsGifts.length === tempCart.GoodsList[0].giftList.length && state.GoodsGifts.length > 0) {
        for (let i = 0; i < state.GiftsOption1List.length; i++) {
            const a = tempCart.GoodsList[0].giftList[0]._option1List.find(item => state.GiftsOption1List[i].id === item.id)
            if (!a) return false
            flag = GetCompare(state.GiftsOption1List[i], a)
            if (!flag) return false
        }
        for (let i = 0; i < state.GiftsOption2List.length; i++) {
            const a = tempCart.GoodsList[0].giftList[0]._option2List.find(item => state.GiftsOption2List[i].id === item.id)
            if (!a) return false
            flag = GetCompare(state.GiftsOption2List[i], a)
            if (!flag) return false
        }
        for (let i = 0; i < state.GiftsOption3List.length; i++) {
            const a = tempCart.GoodsList[0].giftList[0]._option3List.find(item => state.GiftsOption3List[i].id === item.id)
            if (!a) return false
            flag = GetCompare(state.GiftsOption3List[i], a)
            if (!flag) return false
        }
    } else {
        return false
    }
    return true
}
复制代码

这是找到了商品规格来进行比较，用Object.entries循环对象里的每一个数据，_ 是接口的商品规格对象，a是locl中的商品规格，让他们key值一样了再进行比较值，如果一个值不一样直接retrun false 让locl中的值进行初始化

function GetCompare (_, a) {
    for (const [key, value] of Object.entries(a)) {
        for (const [key1, value1] of Object.entries(_)) {
            if ((key !== 'activated' && key !== 'disabled') || (key1 !== 'activated' && key1 !== 'disabled')) {
                if (key === key1) {
                    if (value !== value1) return false
                }
            }
        }
    }
    return true
}
复制代码

这就是最后进行赋值去判断函数返回的值，来进行判断在后台有没有修改数据

const flag = CircularCommodity(state, tempCart)
if (flag === false) {
    rootState.Cart.GoodsList = []
    rootState.Cart.PackageName = ''
    dispatch('Cart/CalcTotalPrice', {}, { root: true })
} else {
    rootState.Cart.GoodsList = tempCart.GoodsList
    rootState.Cart.PackageName = tempCart.PackageName
    dispatch('Cart/CalcTotalPrice', {}, { root: true })
}
复制代码