Vue 修改成功之後我做了什麼

是你晨曦哥呀發表於2020-12-19
Vue

Vue 修改成功之後我做了什麼

背景：前端將修改的資料傳遞到後端，後端返回成功之後，我們要將資料及時顯示出來。
霸道方法一：重新請求介面
柔和方法二：修改成功之後的資料傳遞到源資料中，進行雙向繫結顯示。

我是怎麼做的

有想過用霸道方法，剩下的時間就是自己的啦。哈哈。
但是今天我在這裡進行了讓步，明天我就會其他的事情上做出讓步（20歲的小夥子摸什麼?魚咯，摸魚?都是富人做的事情），所以還是要迎難而上。


我的需求： 我需要對列表中的某一行進行修改，然後將修改且成功的資料重新放入列表中。
我的想法： 我們知道Vue可以進行雙項繫結，雙向繫結又是基於存放在堆中資料引用控制的，所以我們可以在點選修改的時候把源資料儲存起來（將源資料引用儲存起來）

儲存源資料引用

data: function () {
        return {
            updateData: {
            // 需要修改的資料
                id: 0,
                meanings: [],
             
                // 為了修改不重新請求資料直接儲存資料來源
                baseData: []
            }
     }
 }

我們先建立存放資料來源的物件，然後只需要在點選修改的是時候將資料來源引用傳入baseDate物件中就可以了。

  • 首先我們當然是將修改物件進行賦值
  • 然後將源資料存入baseData
  • 使用不儲存資料來源的引用傳入this.updateData.meanings進行修改操作（這裡一定要使用不儲存資料來源引用的方式賦值，不然你修改this.updateData.meanings也會到源資料進行直接修改，還沒有修改成功，就已經將列表資料修改掉了。）

反向修改源資料

當後端返回修改成功之後我們就需要將修改之後的資料，反向到源資料中。這個時候我們之前建立的baseData物件就起作用啦。因為baseData就是源資料。

  • 因為我的業務需求，我儲存的是一個陣列，所以我需要將baseData源資料的長度修改為我修改後資料的長度。（主要是給各位小夥伴安排位置坐下來，看我獻醜）
  • 然後就是在不改變源資料資料引用的前提下面進行修改資料。（這裡我用到了Vue.set方法，因為自己再去使用遍歷拿到this.updateData.meanings[i] 物件中資料的值，然後進行一一賦值，程式碼太多了，既然有寫好的api所以我就直接使用了。Vue.set方法原理應該也是一樣的，感興趣的小夥伴可以自己研究一下。）

相關文章