vue购物车实例中vuex state改变但页面不刷新的解决办法

在自学vue中 运用vuex和elment-ui自己做了一个简单的购物车项目 

其中当我修改了state中数组里某对象的属性值时，页面并未刷新，于是我在网上查找解决方案

最后找到了解决的办法

vue 中是无法检测到 根据索引值修改的数据 变动的

意思就是通过数组的变异方法（Vue数组变异方法）我们可以动态控制数据的增减，但是我们却无法做到对某一条数据的修改

//在store.js中 在state里有这样一个数组
tableData=[
    {
    name:'phone',
    price:3000,
    count:1
　　},
　　...
]     

在另一个组件中我们通过计算属性获取到这个数组

computed：{
    goodslist(){
        return this.$store.state.tableData
}
}

当我们在函数中直接修改 goodlist里某个对象的某个属性值时，页面并不会动态更新

//这样做页面是不会刷新的,但值已经改变了
this.goodslist[0].count++

这时候我们需要用到Vue.set()响应式新增与修改数据

调用方法：Vue.set( target, key, value )

推荐使用ES6的语法

this.goodslist[0].count++
Vue.set(this.goodslist,0,this.goodslist[0])

之后变可以实现页面随着数据的刷新而动态刷新了~（然而我是将上述代码放到了mutations中在所需组件中调用该方法进行属性修改的）

原文地址：https://blog.csdn.net/qq_37968920/article/details/83834171?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task