How to get rid of code duplication in Vuex?

Question

Vue.js

I am implementing a list of contacts. Contacts can be deleted/added/updated/add contact information etc.
I additionally save all changes in Local Storage.
Works well, but I think the code doesn't look quite right.
Is it possible to optimize actions and mutations?
Is it possible to get rid of the constantly duplicated line with localStorage in mutations (without using additional libraries)?

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

Subscribe to store state changes . In the handler, do localStorage.setItem.

Answer 2

Can the plugin be connected?

Answer 3

Even in this implementation, you have an error.
Mutations only change the vuex store state. They do n't do anything else.
You need to receive data from an external source and save it there in actions.
Just imagine that you decide to expand your project, add a backend and store data on the server.
Now you will use axios or fetch to access external data.
You will have to rewrite everything .
At the same time, you could abstract away from the data storage location by writing some wrapper-layer and changing in the future in this layer calls to localStorage to axios / fetch calls.