vuex数据更新了但是页面没变化（个人记录，他人可能无帮助） - 好文

vuex添加数据时一定要注意

这几天练习vuex的时候写一个购物车，不复杂的逻辑出了很多不正常的错误，比如向vuex中添加数据后，进行更改时虽然数据变了但是页面并没有进行更新等等。。。冥思苦想找到了问题！
data() { return { msg: "商品详情", product_id: "", product_info: "", } },
methods: { addCar(){ // 重要！！！！！！！！！
一定不能这样向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(data);
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中的数据时出了很多蛋疼的错误！！！！！ //想了很多天，快成心事了！后来我把数据转了一下换了一种方式
//(就是没有被注释的方式添加)错误就全没了！

热门工具换一换