vuex如何优雅的替换掉states里某个数组的一个值

为什么80%的码农都做不了架构师？>>>   

• [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)

转载于:https://my.oschina.net/dawd/blog/808158