VueJ, Vuex 및 복잡한 상태

VueJ, Vuex 및 복잡한 상태

복잡한 데이터 모델 덕분에 VueX 스토어를 통해 VueJs의 대응력을 떨어뜨릴 수 있었습니다.데이터는 다음과 같은 개체 배열의 개체입니다.

"users": { 
  "2017": [
    { id: 1, name: "bob" },
    { id: 2, name: "jane" },
  ],
  "2016": [ 
    ...
  ]
},
"dude": null

원래 ES6클래스를 스토어에 저장하고 있었는데(도우미 기능이 많이 있습니다) 그 후 삭제했습니다.

올바른 사용자에게 접근하기 위해 다음과 같은 계산된 속성이 있습니다.

  computed: {
    user () {
      return this.$store.state.users.users[this.$store.state.users.currentDate][this.$store.state.users.currentUserIndex]
    },
    ...

이 문제는 변환을 커밋하여 이름을 업데이트하면(예를 들어 Chrome Vue 디버거에서 상태가 변경되었지만 템플릿은 변경되지 않았음을 확인할 수 있습니다).user.name이전 이름이 계속 됩니다).

다음은 돌연변이의 코드입니다.

  PATCH_USER (state, payload) {
    let index = state.users[state.currentDate].findIndex((el) => el.id === payload.user.id)
    let user = Object.assign(state.users[state.currentDate][index], payload.user)
    Vue.set(state.users[state.currentDate], index, user)
  },

그 부분은 내가 바보 같은 짓을 하고 있다는 걸 의미하죠에 대해 계산된 속성을 추가하는 경우dude(루트 수준 상태 항목)을 지정한 후 템플릿에 포함하면 사용자 이름이 올바르게 업데이트됩니다.

어플리케이션에는 더 많은 것이 있습니다만, 제가 보여드린 것에 뭔가 문제가 있는 것 같습니다.

아무쪼록 잘 부탁드립니다!

갱신하다

8시간 동안 씨름한 결과 SO에게 투고 후 2분 이내에 답이 나온 것 같습니다(@blockhead와 @bert-evans 감사합니다).

모든 코드를 확인했다고 생각했는데, 백엔드 서버에서 데이터를 처음 로드했을 때 잘못된 것이 판명되었습니다. payload는 Web API로부터의 응답입니다.

// bad 
SET_USERS (state, payload) {
  state.users[state.currentDate] = payload.users
}

// good
SET_USERS (state, payload) {
  Vue.set(state.users, state.currentDate, payload.users)
}

이 문제는 새 키를 기존 Vuex 개체에 잘못 할당한 것입니다.다음 코드 사용 방법Vue.set문제를 해결했습니다.

SET_USERS (state, payload) {
  // object, key, value
  Vue.set(state.users, state.currentDate, payload.users)
}

언급URL : https://stackoverflow.com/questions/44252299/vuejs-vuex-and-complex-state