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