The data in localstorage.js file cannot be stored synchronously with localStorage

[ann61wang]

I use an object to store the data I need to cache. When an input box loses focus, the corresponding method is triggered over time to save the data in localstorage.js. Is a set of lists, when pressing the enter key, data can be synchronized, when only lose focus, localstorage.js data has changed, but not synchronized to localStorage.

localStorage.js

export const state = () => ({
  listNum: [],
  listContent: {},
  test: {
    imgAlt: '',
    imgSrc: '',
    titleCache: '',
    descCache: ''
  },
})

export const mutations = {
  changeImgAlt(state, inputValue) {
    state.test.imgAlt = inputValue
  },
  insertImg(state, obj) {
    state.test.imgAlt = obj.imgAlt
    state.test.imgSrc = obj.imgSrc
  },
  clearImgAlt(state) {
    state.test.imgAlt = ''
    state.test.imgSrc = ''
  },
  syncValue(state, value) {
    state.test.titleCache = value.title
    state.test.descCache = value.desc
  },
  syncList(state, items) {
    state.listNum = items
  },
  syncContent(state, contentObj) {
    state.listContent[contentObj.id] = contentObj.content
  },
  clearContent(state) {
    state.listContent = {}
  }
}

Method over time when the focus is lost：

 handleInputBlur(e) {
      this.content = e.target.innerText
      this.syncContent(this.contentObj)
      console.log(localStorage.localStorage)
      console.log(this.listContent)
    }

I don't understand why this is happening. I think it's the plugin itself