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

时间 2019-12-14

标签 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也是一个对象, 结构和数组里的对象彻底同样...html

如今问题是, 根据id, 我把须要修改的的对象找出来了(tmp), 若是直接把data复制给tmp, states是更新了, 可是视图不会更新, 难道只能把对象里的值一个个赋过去吗, 对象字段少还行, 多的话, 这么写实在有点蛋疼...有没有优雅点的写法...若是是在vm中还能够用set, vuex中该怎么写.?vue

0 vuex

6
POSTS数组

1.2k
VIEWSide
Log in to reply

Gpost

Ginhing

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

0 code

林岑影
7 months ago @Ginhingcomponent

@Ginhinghtm

我用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

papersnake

7 months ago

Object.assign(state, data)

我用assign 一句搞定啊

针对你的

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