前言:最近在写一个药店方面的购物车逻辑,我借助了vuex的store来对全局的商品、活动进行分module存储和操纵。具体的业务逻辑为如下,最后导致了state的指针紊乱,导致了state的值可以不通过vuex指令而进行更改。现代码总结和逻辑过程如下:
详情代码如下:
在通过rootState获取所有活动的商品信息时,
最初我只是简单的const originGoodsList = commonGoods,
结果造成我的commonGoods在我每次提交数据对所有的数据汇聚在一起,筛选,去重,合并之后。
我的state里的commonGoods居然跟最后的arr结果是一样的。明明我只是获取rootState里的commonGoods然后复制为新的数组进行操作,并没有通过dispatch对commonGoods进行任何操作。
经过一番折腾发现,无论我怎么复制commonGoods,我在此方法中复制的originGoodsList始终是和state里的commonGoods公用一个内存地址,所以我在此借用JSON.parse(JSON.stringify)对其进行深度复制。
然后又因为,我originGoodsList里所有的数据都是从其他goods里的东西合并的,
紧接着我在对originGoodsList里对应其他goods里的部分进行修改时,一样会联动到state里的对应其他goods的部分,
所以我在originGoodsList进行数据收集之后我对其进行了再一次的深度复制获得到了另外一个transferGoodsList。
从而规避了这种奇怪的指针紊乱的问题。