vuex中state对象会数组中的值更新后getters没有监听到state数据的改变的问题state数据跟新页面不刷新问题

问题就出现在使用这样的写法直接修改/更新state对象中的值，没错state中的值是修改到了，但是vuex监测不到的，所以很简单的方法就是整个对象去替换/赋值，这样vuex就能监测到state的变化，同事getters也会跟着变化了

赋值之后不会触发getter方法刷新，修改为深拷贝之后即可触发getter刷新

简单的处理方法是，将对象或数组转换成字符串，再转换回来，赋值就解决这个问题了

downNum(state,id){
        //将对象转换一下，从新开辟内存空间保持，然后在从新赋值，完美解决
        let cartGood = JSON.parse(JSON.stringify(state.cartGoods));
        cartGood[idx].num--;
        state.cartGoods = cartGood;
    }

可以通过JSON序列化来实现 1

vuex的mutations

addCartNum(state,id){
	let idx = state.cartGoods.findIndex((item)=>item.id == id);
    let goodsArr = JSON.parse(JSON.stringify(state.cartGoods));
    goodsArr[idx].num++;
    state.cartGoods = goodsArr;
}

可以使用vue提供的$forceUpdate方法 2

vuex的actions

addCartNumSync(context,id){
	context.commit('addCartNum',id)
}

vuex的mutations

addCartNum(state,id){
    let idx = state.cartGoods.findIndex((item)=>item.id == id);
    state.cartGoods[idx].num++;
}

页面组件代码

methods:{
    ...mapActions(['addCartNumSync']),
    add(id){
        this.addCartNumSync(id);
        //调用完成vuex中的actions操作方法对数据进行改变后
        //强制重新渲染页面，触发update生命周期钩子函数
        this.$forceUpdate();
    }
}