영구 스토리지에서 저장소 수분을 보충한 후 Vuex getter가 업데이트되지 않음

영구 스토리지에서 저장소 수분을 보충한 후 Vuex getter가 업데이트되지 않음

Electron + Vue 설정에 이상한 문제가 있습니다.

상태: 전자 + Vue (보일러 플레이트를 사용) + vuex-persist (vuex-persistate 및 vuex-persistfile도 사용)

문제: Vuex getters는 저장소의 수분을 보충할 때 0/null/'로 유지됩니다.내가 그걸 어떻게 알아?로컬 스토리지가 깨끗하면(앱을 처음 실행), 첫 번째 돌연변이 상태가 업데이트되고(게이터가 올바른 값을 반환), 브라우저의 로컬 스토리지에 개체가 추가되는 것을 볼 수 있습니다.그러나 앱을 다시 시작하면 이전과 마찬가지로 돌연변이가 상태 및 로컬 스토리지 업데이트를 트리거하지만 Getters는 비어 있거나 기본값으로 유지됩니다.아래 getter는 빈 배열을 반환합니다.

SETUP: 서드파티 API로 동작하는 앱이 있습니다.데이터를 취득하여 계산하여 데이터를 반송합니다.API에는 인증도 필요합니다.아래는 저의 Vuex 구조입니다.

내 주 목적의 일부...

const state = {
  token: '',
  projects: [],
  work_packages: [],
  timeEntriesLocal: []
}

...그리고 내 부하 중 한 명:

const getters = {
  todayLog () {
    function sameDay (d1, d2) {
      return d1.getFullYear() === d2.getFullYear() &&
        d1.getMonth() === d2.getMonth() &&
        d1.getDate() === d2.getDate()
    }
    var entries = state.timeEntriesLocal
    var todayEntries = []
    entries.forEach(element => {
      var date = element.spentOn
      var today = new Date()
      if (sameDay(date, today)) {
        todayEntries.push(element)
      }
    })
    return todayEntries
  }
}

"today" 기한이 지난 항목을 배열에서 반환합니다.

시간 입력Local은 다음 방법으로 채워집니다.

addTimeEntry () {
  let entry = {
    id: this.$store.state.UserData.timeEntriesLocal.length + 1,
    project: this.getItemById(this.$store.state.UserData.current.project_id, this.$store.state.UserData.projects),
    spentOn: new Date(),
    comment: this.comment,
    activityId: this.activityId,
    workPackage: this.getItemById(this.$store.state.UserData.current.work_package_id, this.$store.state.UserData.work_packages),
    hours: this.precisionRound(this.$store.state.UserData.duration / 60 / 60, 2),
    published: false,
    loading: false,
    infoMessage: ''
  }

  this.$store.commit('ADD_LOCAL_ENTRY', entry)
}

마지막으로 위에서 사용한 돌연변이가 있습니다.

ADD_LOCAL_ENTRY (state, entry) {
  state.timeEntriesLocal.unshift(entry)
}

의 변경점timeEntriesLocal어레이 길이를 변경했기 때문에 픽업되지 않습니다.이는 문서의 Common Gotchas 섹션에서 다루는 JavaScript의 제한 사항입니다.이 문제를 해결하는 방법은 Vuex 문서에도 나와 있습니다.

Vue의 반응성 규칙을 따르는 돌연변이

Vue에 의해 Vue 스토어 상태가 비활성화되므로 상태를 변환하면 상태를 감시하는 Vue 컴포넌트가 자동으로 업데이트됩니다.즉, 플레인 Vue를 사용할 때 Vuex 돌연변이가 동일한 반응성 경고를 받는다는 의미도 됩니다.

1. 원하는 모든 필드를 미리 사용하여 스토어의 초기 상태를 초기화하십시오.

2. 개체에 새 속성을 추가할 때 다음 중 하나를 수행해야 합니다.

   • Use Vue.set(obj, 'newProp', 123), 또는
   • 해당 개체를 새 개체로 바꿉니다.예를 들어 객체 확산 구문을 사용하면 다음과 같이 쓸 수 있습니다.state.obj = { ...state.obj, newProp: 123 }

이 예에서는 Vue(Vuex)가 이러한 변경을 검출하도록 다음과 같은 작업을 수행할 수 있습니다.

ADD_LOCAL_ENTRY (state, entry) {
    state.timeEntriesLocal.unshift(entry);
    Vue.set(state, 'timeEntriesLocal', state.timeEntriesLocal);
}

언급URL : https://stackoverflow.com/questions/53780711/vuex-getters-are-not-updated-after-store-re-hydration-from-persistent-storage