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中的数据时出了很多蛋疼的错误！！！！！
想了很多天，快成心事了！后来我把数据转了一下换了一种方式
(就是没有被注释的方式添加)错误就全没了！