vuex数据更新了但是页面没变化(个人记录,他人可能无帮助)

vuex添加数据时一定要注意

这几天练习vuex的时候写一个购物车,不复杂的逻辑出了很多不正常的错误,比如向vuex中添加数据后,进行更改时虽然数据变了但是页面并没有进行更新等等。。。冥思苦想找到了问题!

 data() {
      return {
        msg: "商品详情",
        product_id: "",
        product_info: "",
      }
    }, 
 methods: {
    addCar(){
        // 注意,我是这样添加数据的,我将data里面的数据直接作为对象放入了vuex
        // this.product_info=JSON.parse(JSON.stringify(this.product_info));
        // this.product_info.num=1;
        // this.product_info.state=false;
        // this.$store.dispatch("addCar",this.product_info)//将商品放入vuex
        // 注意:::要这样添加数据!!!!
        let data = JSON.parse(JSON.stringify(this.product_info)); 
        console.log(this.product_info);
//其实把数据打印看就能看到没有转的数据有很多vue对象自带的方法
//我猜可能是因为这个原因使得我在vuex中更新数据后,使用的页面中的vue对象与之前添加进去的vue对象冲突了。。
        data.num=1;//添加一个默认数量,为以后累加做准备
        data.state=false; //选中
        this.$store.dispatch("addCar",data)//将商品放入vuex
        this.$message({
          message: '已加入购物车!',
          type: 'success',
          duration:400
        });
      }
}
//刚开始错误的处理方式时,vuex数据变化了,比如(vuex中的productList变化后)但是页面没有更新时我用这样 
//先把vuex中用的对象置为空,然后再赋值,这样强制更新,页面才刷新!
//let newProductList=state.productList.concat(); 复制一个对象
//state.productList=null;
//state.productList=newProductList;



当我调用addCar函数向vuex添加数据时,我用的是直接将本页面的vue对象添加到了vuex中
这就导致了后面操作vuex中的数据时出了很多蛋疼的错误!!!!!
想了很多天,快成心事了!后来我把数据转了一下换了一种方式
(就是没有被注释的方式添加)错误就全没了!

你可能感兴趣的:(前端,vue)