@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)
  }
}
  • Вопрос задан
  • 116 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Подпишитесь на изменения состояния хранилища. В обработчике делайте localStorage.setItem.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
yarkov
@yarkov Куратор тега Vue.js
Проект "Жизнь после смерти" - lifeafterdeath.ru
Можно плагин подключить
Ответ написан
delphinpro
@delphinpro
frontend developer
Даже в такой реализации у вас ошибка.
Мутации только изменяют состояние хранилища vuex. Больше они ничего не делают.
Получать данные из внешнего источника и сохранять туда нужно в действиях.
Просто представьте, что вы решили расширить ваш проект, прикрутить бэкэнд и хранить данные на сервере.
Теперь для доступа к внешним данным вы будете использовать axios или fetch.
Вам придется переписать всё.
В то время, как вы могли бы абстрагироваться от места хранения данных, написав какую-нибудь обертку-прослойку и поменяв в будущем в этой прослойке обращения к localStorage на вызовы axios/fetch.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы