Как получить и сбросить модули в Vuex

Получил 2 модуля # модуль А

const state = {
    a: '',
    b: '',
    c: '',
}
const mutations = {
    reset(state) {
    state.a = ''
    state.b = ''
    state.c = ''
  }
}

Я использую vuex-map-fields, чтобы включить двустороннюю привязку в компоненте A

После этого я хочу получить все состояния модуля A в модуль B (state.items) и СБРОСИТЬ после завершения выборки #module B

const state = {
 items: []
},
const mutations = {
    addItem (state) {
        state.items.push(moduleA.state)
    },
}

Я пытался

dispatch('moduleB/addItems')
commit('molduleA/reset')

с данными moduleA

const state = {
    a: '1',
    b: '2',
    c: '3',
}

но он не работает, сохраните только состояние сброса модуля А

#resultOfModuleB

const state = {
 items: [
    {a:'', b:'', c:''}
 ]
},

Если я только отправляю (‘moduleB / addItems’), он работает

const state = {
 items: [
    {a:'1', b:'2', c:'3'}
 ]
},

Как лучше поступить? заранее спасибо


vue.js vuex vuex-modules
person Viet Ton    schedule 18.01.2021    source источник
comment
что вы имеете в виду под его работой, если я только отправлю (....). Тогда состояние модуля B содержит состояние модуля A, а состояние модуля A пусто? Что находится в A, прежде чем вы добавите его к элементам B? Надеюсь, я смогу вам помочь, если вы добавите дополнительную информацию к своему вопросу.   -  person db3000    schedule 18.01.2021
comment
@ db3000 Я редактировал вопрос   -  person Viet Ton    schedule 19.01.2021

Ответы (1)


arrow_upward
2
arrow_downward

Хорошо, теперь я думаю, что понимаю вашу проблему. Поправьте меня если я ошибаюсь! Если вы просто вызываете функцию ModuleB, тогда B содержит данные A.state, как и должно. Но если вы вызовете функцию сброса в A.state, оба будут пустыми.

Причина этого может быть в том, как вы добавляете объект A.state в ваше B.state. Нажимая объект A.state в массив B.state.items, вы не копируете объект или его значения. Вы просто передаете адрес, по которому объект находится в памяти.

Итак, A.state и элемент массива B.state.items смотрят в одно и то же место в памяти. Если вы сейчас отключите A.state, элемент массива B.state.items также изменится.

Вы можете попытаться исправить это с помощью deepCopy массива состояний. В lodash есть такие функции, как cloneDeep или аналогичные. Но чтобы полностью понять, что происходит, вы можете написать такую ​​функцию самостоятельно, потому что это не так уж и сложно.

function deepCopy(obj) {
  const retObj = {}
  Object.keys(obj).forEach(prop => {
    retObj[prop] = obj[prop];
  });

  return retObj
}

Эта функция должна работать с такими объектами, как ваш, и в вашем случае. (Если у ваших объектов есть вложенные свойства, он не будет работать из-за способа доступа к свойствам)

Надеюсь, я ничего не пропустил и смогу вам чем-то помочь!

person db3000    schedule 19.01.2021
comment
Я решил эту проблему. Как вы сказали, это из-за передать адрес. Мой метод: создайте получатель в moduleA и вставьте в moduleB, после этого я могу свободно сбросить moduleA без каких-либо проблем - person Viet Ton; 19.01.2021
comment
Рад, что смог помочь! - person db3000; 19.01.2021