Как избавиться от дублирования кода во Vuex?

Question

[betterthanyouthink]

Реализовываю список контактов. Контакты можно удалять/добавлять/обновлять/добавлять информацию о контакте итд.
Все изменения я дополнительно сохраняю в Local Storage.
Работает хорошо, но я думаю, что код выглядит не совсем правильно.
Можно ли оптимизировать экшены и мутации?
Можно ли избавиться от постоянно дублирующейся строчки с localStorage в мутациях (без использования доп. библиотек)?

const state = {
  contacts: JSON.parse(localStorage.getItem('contacts') || '[]')
}

const mutations = {
  addNewContact(state, contact) {
    contact.info = []

    state.contacts.push(contact)

    localStorage.setItem('contacts', JSON.stringify(state.contacts))
  },

  removeContact(state, id) {
    state.contacts = state.contacts.filter(contact => contact.id !== id)

    localStorage.setItem('contacts', JSON.stringify(state.contacts))
  },

  addContactInfo(state, data) {
    
    const {id} = data.contact
    const {info} = data
    
    const idx = state.contacts.findIndex(contact => contact.id === id)
   
    state.contacts[idx].info.push(info)
    
    localStorage.setItem('contacts', JSON.stringify(state.contacts))
  },

  removeContactInfo(state, data) {
    const contactId = data.contact.id
    const itemId = data.item.id
   
    const contactIdx = state.contacts.findIndex(contact => contact.id === contactId)
    
    state.contacts[contactIdx].info = state.contacts[contactIdx].info.filter(item => {
      return item.id !== itemId
    })
    
    localStorage.setItem('contacts', JSON.stringify(state.contacts))
  },

  updateContactInfo(state, data) {
    const contactId = data.contact.id
    const itemId = data.item.id
 
    const contactIdx = state.contacts.findIndex(contact => contact.id === contactId)
    const {info} = state.contacts[contactIdx]
    const itemIdx = info.findIndex(item => item.id === itemId)

    info[itemIdx] = data.item

    state.contacts[contactIdx].info = info

    localStorage.setItem('contacts', JSON.stringify(state.contacts))
  }
}

const actions = {
  addNewContact({commit}, contact) {
    commit('addNewContact', contact)
  },

  removeContact({commit}, id) {
    commit('removeContact', id)
  },

  addContactInfo({commit}, data) {
    commit('addContactInfo', data)
  },

  removeContactInfo({commit}, data) {
    commit('removeContactInfo', data)
  },

  updateContactInfo({commit}, data) {
    commit('updateContactInfo', data)
  }
}

Answer 1

[0xD34F]

Подпишитесь на изменения состояния хранилища. В обработчике делайте localStorage.setItem.

Comments

[betterthanyouthink]

А есть какой-то способ подписаться сразу на все мутации? Или мне будет необходимо делать конструкцию типа switch(mutation.type) в обработчике?

[0xD34F]

betterthanyouthink,

А есть какой-то способ подписаться сразу на все мутации?

В документации чёрным по белому написано, что "обработчик handler вызывается после каждой мутации". Вам неизвестно значение слова "каждой"?

Или мне будет необходимо делать конструкцию типа switch(mutation.type) в обработчике?

Да, если разные мутации должны по-разному обрабатываться.

Answer 2

[Алексей Ярков]

Можно плагин подключить

Answer 3

[Сергей delphinpro]

Даже в такой реализации у вас ошибка.
Мутации только изменяют состояние хранилища vuex. Больше они ничего не делают.
Получать данные из внешнего источника и сохранять туда нужно в действиях.
Просто представьте, что вы решили расширить ваш проект, прикрутить бэкэнд и хранить данные на сервере.
Теперь для доступа к внешним данным вы будете использовать axios или fetch.
Вам придется переписать всё.
В то время, как вы могли бы абстрагироваться от места хранения данных, написав какую-нибудь обертку-прослойку и поменяв в будущем в этой прослойке обращения к localStorage на вызовы axios/fetch.

Comments

[betterthanyouthink]

Спасибо за ваш ответ. Правильно понимаю, что лучшим вариантом будет создать класс/функцию-обработчик, независимую от стора и обращаться к ней в экшенах?

[Сергей delphinpro]

betterthanyouthink, Может быть я немного перегнул с абстракциями. Используя axios, мы никакие обертки не используем. Но главное то, что в мутациях не следует обращаться к внешним хранилищам. Это нужно делать в действиях, и из них же вызывать мутации.
В данном вашем случае подписка на изменения стора будет оптимальными вариантом. Этот ответ уже был дан, поэтому я решил не подсказывать как лучше, а указать на ошибки проектирования.