Как обновить объект в массиве vuex store? - PullRequest
Новая
       22

Как обновить объект в массиве vuex store?

0 голосов
/ 21 апреля 2019

Я довольно новичок в vue / vuex / vuetify, но начинаю понимать его.У меня проблема, хотя я не смог ее решить должным образом.

У меня есть массив "проектов" в моем магазине.При удалении и добавлении элементов в хранилище с помощью мутаций изменения должным образом отражаются в подкомпонентах, ссылающихся на массив как свойство.

Однако изменения элементов в массиве не отражаются, хотя я вижу, что массив вХранилище обновлено.

Единственный способ заставить его "работать" с действием обновления - это либо:

  1. удалить проект из массива в хранилище, а затем добавить его

  2. использует код, который делает то же самое, что описано выше, но примерно так: 

    state.categories = [
...state.categories.filter(element => element.id !== id),
category
]

Но проблема с двумя вышеупомянутыми методами заключается в том, чтопорядок массива изменяется, и я действительно хотел бы избежать этого ..

Итак, как бы я переписал свой метод мутации, приведенный ниже, чтобы состояние отражалось на подкомпонентах и ​​сохранял порядок массива? 

 updateProject(state, project) {

        var index = state.projects.findIndex(function (item, i) {
            return item.id === project.id;
        });

        state.projects[index] = project;
    }

1 Ответ

0 голосов
/ 22 апреля 2019

Вы можете использовать slice, чтобы добавить отредактированный проект в правильное положение: 

updateProject(state, project) {

  var index = state.projects.findIndex(function(item, i) {
    return item.id === project.id;
  });

  state.projects = [
    ...state.projects.slice(0, index),
    project,
    ...state.projects.slice(index + 1)
  ]
}

или вы можете использовать JSON.parse(JSON.stringify()), чтобы сделать глубокую копию объекта 

updateProject(state, project) {

  var index = state.projects.findIndex(function(item, i) {
    return item.id === project.id;
  });

  state.projects[index] = project;
  state.projects = JSON.parse(JSON.stringify(state.projects))
}
...