[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

G

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

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大法好。

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

7 months ago 

Object.assign(state, data)

我用assign 一句搞定啊

针对你的

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