vuex如何優雅的替換掉states裏某個數組的一個值

• [MODIFY_SHAKE_PRIZE](state, data) {
          let tmp = state.prizeList.list.find((i) => i.id === data.id)
          tmp.name = data.name
          tmp.icon = data.icon
          tmp.probability = data.probability
          tmp.expired_at = data.expired_at
      }

  這是我如今的代碼, 其中 state.prizeList.list 是一個數組, 其值是一個個對象, data也是一個對象, 結構和數組裏的對象徹底同樣...

  如今問題是, 根據id, 我把須要修改的的對象找出來了(tmp), 若是直接把data複製給tmp, states是更新了, 可是視圖不會更新, 難道只能把對象裏的值一個個賦過去嗎, 對象字段少還行, 多的話, 這麼寫實在有點蛋疼...有沒有優雅點的寫法...若是是在vm中還能夠用set, vuex中該怎麼寫.?

   0  

  6
  POSTS

  1.2k
  VIEWS

  Log in to reply

• G

  Ginhing 

  7 months ago

   

  let list = state.prizeList.list
  let index = list.findIndex(obj => obj.id === data.id)
  index > -1 && Vue.set(list, index, {
    ...list[index],
    data
  })

   0  

• 林岑影 

  7 months ago  @Ginhing

   

  @Ginhing

  我用set後, vuex和component的數據都更新了, 可是視圖仍是不更新...

   0  

• H

  haocong 

  7 months ago

   

  根據官網關於數組變更檢測部分的介紹：http://vuejs.org.cn/guide/list.html#替換數組
  能夠經過下面的方法來實現需求：

  state.prizeList.list = state.prizeList.list.filter(item => item.id !== data.id) // 刪除符合條件的元素，並將新數組替換原來的數組
  state.prizeList.list.push(data) // 將新元素壓入數組中

  這樣就能實現視圖的更新了，不過這樣會形成替換的元素在數組末尾，而不是原來元素的位置。

  Vue.js大法好。

   0  

• 林岑影 

  7 months ago  @haocong

   

  @haocong said:

  根據官網關於數組變更檢測部分的介紹：http://vuejs.org.cn/guide/list.html#替換數組
  能夠經過下面的方法來實現需求：

  state.prizeList.list = state.prizeList.list.filter(item => item.id !== data.id) // 刪除符合條件的元素，並將新數組替換原來的數組
  state.prizeList.list.push(data) // 將新元素壓入數組中

  這樣就能實現視圖的更新了，不過這樣會形成替換的元素在數組末尾，而不是原來元素的位置。

  謝謝回答, 不過這樣仍是改變了順序, 不太好...

  let obj = state.prizeList.list.find((i) => i.id === data.id)
          for (let i in obj) {
              if (obj.hasOwnProperty(i) ) {
                  obj[i] = data[i]
              }
          }

  目前暫時只能用這方法了

   1  

• P

  papersnake 

  7 months ago 

   

  Object.assign(state, data)

  我用assign 一句搞定啊

  針對你的

  let tmp = state.prizeList.list.find((i) => i.id === data.id)
  Object.assign(tmp,data)