반응형
Vuex Store - 볼 수 있도록 상태 저장소에서 데이터 가져오기
상태 저장소에 있는 개체의 데이터를 구성 요소 필드에 표시하는 방법
Vuex:
state:
books: [], // this object has id, title, genre
actions:
allBooks(context) {
axios
.get('/api/books')
.then(response => context.commit('SET_BOOKS', response.data))
.catch(error => console.log(error))
},
mutations:
SET_BOOKS(state, books) {
state.books = books
},
구성 요소:
created() {
this.$store.dispatch('allBooks')
},
computed: {
storeBooks() {
return this.$store.state.books
},
},
이제 책 페이지를 로드할 때 id, 제목, 장르 필드에 vuex 매장의 데이터가 채워졌으면 좋겠다.물건에 있는 데이터에 일일이 접근할 수 없다.나는 사용하려고 노력했다.this.books.id = this.$store.books.id
효과가 없어
효과가 없다는 게 정확히 무슨 뜻이야?표시해 보셨습니까?storeBooks
그 구성 요소의 페이지에서 계산된 것은?이렇게 하면 무엇을 볼 수 있는가?
<div>{{ storeBooks }}</div>
모든 책을 표시하려면v-for
루프:
<div v-for="book in storeBooks" :key="book.id">
{{ book.title }}
</div>
참조URL: https://stackoverflow.com/questions/59716992/vuex-store-get-data-from-state-store-for-viewing
반응형
'Programing' 카테고리의 다른 글
링크된 목록에 노드를 추가할 때 이중 포인터를 사용하는 이유는? (0) | 2022.05.23 |
---|---|
개인 최종 정적 속성 대 개인 최종 속성 (0) | 2022.05.23 |
정수.toString(into i) vs String.valueOf(int i) (0) | 2022.05.23 |
vuex-oidc를 사용하여 axios 기본 헤더에서 'access_token'을 설정하고 현재 상태를 유지하는 방법 및 위치 (0) | 2022.05.23 |
Vue CLI 사용 - 사용 가능한 모든 플러그인을 업데이트, 제거 및 보는 방법 (0) | 2022.05.23 |