Задать вопрос
@betterthanyouthink
Начинающий программист :)

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

Реализовываю список контактов. Контакты можно удалять/добавлять/обновлять/добавлять информацию о контакте итд.
Все изменения я дополнительно сохраняю в 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)
  }
}
  • Вопрос задан
  • 226 просмотров
Подписаться 1 Простой Комментировать
Решение пользователя 0xD34F К ответам на вопрос (3)