Vuex 상태 개체에서 키로 항목을 삭제할 때 getter에 바인딩된 계산된 속성이 업데이트되지 않음

Vuex 상태 개체에서 키로 항목을 삭제할 때 getter에 바인딩된 계산된 속성이 업데이트되지 않음

Vuex 상태 개체에서 키별로 항목을 삭제하면서 계산된 속성을 getters에 자동으로 업데이트하려면 어떻게 해야 합니까?

간단한 매장이 있습니다.

const state {
  users: {} // object of objects keyed by userid
}

const getters {
  admins: state => Object.values(state.users).filter(o => o.role === 'administrator'),
  managers: state => Object.values(state.users).filter(o => o.role === 'manager'),
  counters: state => Object.values(state.users).filter(o => o.role === 'counter'),
}

const mutations {
  DELETE_USER (state, userid) {
    delete state.users[userid] // the user id deleted, i can verify this in dev-tools
  }
}

사용자가 삭제되면 vue dev-tools에서 확인할 수 있지만 vue 구성 요소의 계산된 속성에 업데이트가 표시되지 않습니다.

...
  computed: {
    admins: this.$store.getters('admins'),
    managers: this.$store.getters('managers'),
    counters: this.$store.getters('counters')
  },

다른 사용자가 코멘트에 기술한 바와 같이 Vue는 속성 추가 또는 속성 삭제를 감지할 수 없습니다.obj.newProperty = 1또는obj['newProperty'] = 1또는delete obj.unwantedProperty를 사용해야 합니다.Vue.set그리고.Vue.delete여기서 설명하는 바와 같이 https://vuejs.org/v2/api/ #Vue-set

그 이유는 객체의 기존 속성을 값을 변경하여 수정할 때 객체의 setter 메서드를 통해 수정하고 setter 메서드에서 Vue는 이 속성에 의존하는 모든 것(컴포넌트, 계산 속성 등)에 대해 스스로 업데이트하도록 통지하기 때문입니다.

예를 들면,vm.a = 1그리고 계산한 속성을 가지고 있습니다.b그리고.b다음과 같이 평가됩니다.vm.a + 1그럼 이렇게 말하죠b에 의존하다a필요에 따라서a그 가치를 찾아내는 거죠.바꿀 때a맘에 들다vm.a = 2의 setter 메서드를 암묵적으로 호출하면 이 메서드가 통지됩니다.b갱신할 수 있습니다.

단, (사용하지 않고) 속성을 삭제한 경우Vue.delete설정자를 호출하지 않습니다.또, 이 속성의 의존관계는 통지되지 않기 때문에, 자동적으로 갱신되지 않습니다.

몇 가지 추가 사례 - Vue는 무엇이 다른지 어떻게 알 수 있습니까?앞의 예에서 Vue를 초기화하면 데이터에 대한 getter와 setter가 생성됩니다.이 경우 getters와 setters가 생성됩니다.vm.aVue는 그 후 평가를 시도합니다.b그리고 기억하세요.b이vm.a + 1.동안b님의 평가로 전화드리겠습니다.vm.a그리고, 사실, 우리는 전화드렸습니다.vm.a의 getter 메서드.이 getter 메서드에서는b님의 평가는vm.a등록합니다.b~하듯이a의 의존성.

Vuex는 도우미를 제공합니다.mapGetters: (https://vuex.vuejs.org/guide/getters.html#the-mapgetters-helper)

이 도우미는 다음과 같이 Vue Component 계산 필드에서 사용할 수 있습니다.

computed: {
  ...mapGetters([
     'admins',
     'managers',
     'counters'
  ])
}

그런 다음 HTML 템플릿에서 계산처럼 사용할 수 있습니다.

{{ admins }}

또는 컴포넌트 스크립트:

this.admins

Vuex 스토어에 직접 연결되어 있으므로 스토어가 업데이트될 때 생성된 계산은 반응적입니다.

언급URL : https://stackoverflow.com/questions/51860793/computed-properties-bound-to-getters-are-not-updating-on-deleting-items-by-key-f