반응형
상태가 업데이트될 때 구성 요소가 다시 렌더링되지 않음
디버깅을 시도하고 있습니다만, 작성한 라이프 사이클 함수의 외부 API에서 데이터를 꺼내 변환으로 스토어를 갱신하면 상태를 취득하는 컴포넌트의 계산 속성이 갱신되지 않아 컴포넌트가 재렌더링되지 않습니다.좋은 생각 있어요?
컴포넌트 템플릿은 다음과 같습니다.
<template>
<div class="list">
<ul>
<ListItem v-for="transaction in transactions" :list-item-data="transaction" :key="transaction.txid"/>
</ul>
</div>
</template>
<script>
import ListItem from './ListItem.vue';
import External from '../ExternalAPI';
export default {
methods: {
fetchData() {
return ExternalAPI.fetch(data => {
this.$store.dispatch('setTransactions', data);
});
}
},
components: {
ListItem
},
computed: {
transactions () {
return this.$store.getters.transactions;
},
},
created() {
this.fetchData();
},
}
</script>
매장은 다음과 같습니다.
export const store = new Vuex.Store({
state: {
transactions: [],
},
getters: {
transactions: state => {
return state.transactions;
}
},
mutations: {
setTransactions: (state, transactions) => {
let txs = transactions.map(transaction => {
return new Transaction(transaction.id, transaction.prop1, transaction.prop2);
});
state.transactions = txs;
},
},
actions: {
setTransactions: (context, transactions) => {
context.commit('setTransactions', transactions);
},
},
});
vuex 상태 트리의 모든 항목은 기본 일반 개체 또는 배열이어야 합니다.문서에서는 명시적으로 그렇게 말한 내용은 찾을 수 없지만 vuex 문제 153에 대한 코멘트는 찾을 수 있습니다.
지금 인스턴스화 하고 있어요.Transaction
당신의 안에서setTransactions
돌연변이그걸 다른 걸로 바꿔봐
setTransactions: (state, transactions) => {
let txs = transactions.map(transaction => {
return {
id: transaction.id,
prop1: transaction.prop1,
prop2: transaction.prop2
};
});
state.transactions = txs;
},
언급URL : https://stackoverflow.com/questions/47946282/component-not-re-rendering-when-state-is-updated
반응형
'programing' 카테고리의 다른 글
classpath 디렉토리에서 리소스 목록을 가져옵니다. (0) | 2022.08.28 |
---|---|
jar로 실행할 때 클래스 경로 리소스를 찾을 수 없음 (0) | 2022.08.28 |
"../include/header"와 같은 상대 경로의 이점은 무엇입니까?h"는 헤더에 사용할 수 있습니까? (0) | 2022.08.28 |
SIGSEGV를 잡기 위한 신호 핸들러 작성 방법 (0) | 2022.08.27 |
싱글톤과Android의 애플리케이션 컨텍스트 (0) | 2022.08.27 |