Programing

Vuex Store - 볼 수 있도록 상태 저장소에서 데이터 가져오기

c10106 2022. 5. 23. 20:45
반응형

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

반응형