Vuex 4 не удается изменить состояние соседнего модуля

В vuex есть 2 модуля симкарт и устройств(вместе с марками,моделями,типами).

Пример элемента массива симкарт:

{
id: 4,
number: 18311770045,
iccid: 601128328639574012,
operator: Билайн,
status: Первоначальная блокировка,
device: {
  imei: 469141227904895,
  model: Abcd S-2410,
  mark: Avm
 }
}

У устройств есть отдельная таблица моделей устройств.

Сама проблема: при редактировании названия модели устройства, я изменяю названия моделей устройства и в модуле "симкарт" в каждом элементе массива менял device.model на ту что ответил сервер.

Во Vue 2 работала запись:

export const update = async ({ commit, rootState, state }, form) => {
    try {
            const res = await Api.edit(form);
            let oldModel = state.models.find(x => x.id === res.data.data.id);
            commit("setUpdatedModel", res.data.data);
    
            rootState.sim.items.map(sim => {
                if (sim.device?.model && sim.device.model === oldModel.title)
                  (sim.device.model = res.data.data.title)
            });
        }
    ...

и меня устраивало, но решил перейти на vue 3 и vuex 4 и столкнулся с проблемой, заметил что теперь rootState.sim.items это proxy объект и rootState.sim.items.map() изменяет только первый элемент массива, а дальше просто выбрасывает в catch и вот, не знаю что делать, где искать, куда смотреть :(


Ответы (1 шт):

Автор решения: user465504

Сделал через root commit.

Vue 2 давало напрямую таким образом менять данные, но в Vue 3 получается закрыли эту лазейку.

→ Ссылка