변경된 Vuex 객체에 대한 반응이 문제 발생

Question

Vuex.store의 객체 배열에있는 객체의 기존 속성 값을 수정하려고합니다. 저장소를 업데이트 할 때 저장소에 액세스하는 계산 된 속성의 다시 렌더링을 트리거하지 않습니다. 저장된 값을 빈 배열로 재설정 한 다음 새 배열로 다시 설정하면 변경 값이 트리거됩니다. 그러나 단순히 개체 배열의 속성을 업데이트해도 변경 내용이 적용되지 않습니다.

나는 Vue.set()like the docs talk about을 사용해 보았지만 저장소를 업데이트하지만 여전히 계산 된 속성을 다시 렌더링하지 않습니다. 내가 뭘 놓치고 있니? Vue 2.2.4 및 Vuex 2.2.0 사용. 당신이 게터 https://vuex.vuejs.org/en/state.html를 사용하지 않는 상태의 일부를 액세스하고자하는 경우

//DEBUG: An example of the updated post I'm adding 
let myNewScheduledPost = { 
    id: 1, 
    name: 'James' 
}; 
this.$store.dispatch('addScheduledPost', post); 

//DEBUG: My store 
const options = { 
    state: { 
     scheduledPosts: [ 
      { id: 1, name: 'Jimmy'} 
     ], 
    }, 
    mutations: { 
     scheduledPosts: (state, scheduledPosts) => { 
      //This triggers the reactivity/change so my computed property re-renders 
      //But of course seems the wrong way to do it. 
      state.scheduledPosts = []; 
      state.scheduledPosts = scheduledPosts; 

      //Neither of these two lines triggers my computed property to re-render, even though there is a change in scheduledPosts 
      state.scheduledPosts = scheduledPosts; 
      Vue.set(state, 'scheduledPosts', scheduledPosts); 
     }, 
    }, 
    actions: { 
     addScheduledPost({ commit, getters }, newScheduledPost) { 
      let scheduledPosts = getters.scheduledPosts; 
      const idx = scheduledPosts.findIndex(existingScheduledPost => existingScheduledPost.id === newScheduledPost.id); 

      //If the post is already in our list, update that post 
      if (idx > -1) { 
       scheduledPosts[idx] = newScheduledPost; 
      } else { 
       //Otherwise, create a new one 
       scheduledPosts.push(newScheduledPost); 
      } 
      commit('scheduledPosts', scheduledPosts); 

      //DEBUG: This DOES have the correct updated change - but my component does not see the change/reactivity. 
      console.log(getters.scheduledPosts); 
     } 
    }, 
    getters: { 
     scheduledPosts: (state) => { 
      return state.scheduledPosts; 
     } 
    } 
}; 

//DEBUG: Inside of my component 
computed: { 
    mySortedPosts() 
    { 
     console.log('im being re-rendered!'); 
     return this.$store.getters.scheduledPosts.sort(function() { 
      //my sorted function 
     }); 
    } 
} 

Answer 1

귀하의 문제입니다.

computed: { 
    mySortedPosts(){ 
     return this.$store.state.scheduledPosts 
    } 
} 

게터 가게https://vuex.vuejs.org/en/getters.html 계산 속성 위한 것이다. 따라서 귀하의 경우에 게터를 작성하여 예약 된 게시물을 정렬 한 다음 sortedScheduledPosts으로 이름을 지정한 다음 현재와 같이 구성 요소의 계산 된 속성에 추가 할 수 있습니다.

중요한 점은 getter가 구성 요소에서와 같이 상태 속성과 다른 이름을 가져야한다는 것입니다.