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

问题就出现在使用这样的写法直接修改/更新state对象中的值，state中的值是修改了，但是vuex监测不到，所以很简单的方法就是整个对象去替换/赋值，这样vuex就能监测到state的变化，同时getters也会跟着变化简单的处理方法是，将对象或数组转换成字符串，在转换回来，赋值就解决这个问题了downNum(state,id){//将对象转换一下，从新开辟内存空间保持，然后在从新赋值，完美解决

Li的BLOG

2339人浏览 · 2021-06-15 15:59:08

Li的BLOG · 2021-06-15 15:59:08 发布

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

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

downNum(state,id){

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

}

第一种方法：可以通过JSON序列化来实现

vuex的mutations

add(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提供的$forceUpdata方法

vuex的actions

add(context,id){
context.commit('add',id)
}

vuex的mutations

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

页面组件代码

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

   }


}