Vuex Store - получить данные из государственного хранилища для просмотра

Question

Как получить данные из объекта в хранилище состояний для отображения в полях моего компонента?

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
      },
    },

Теперь, когда я загружаю страницу с книгами, я хочу, чтобы поля для идентификатора, названия и жанра были заполнены данными из хранилища vuex. Я не могу получить доступ к данным в объекте один за другим. Я пытался использовать this.books.id = this.$store.books.id, и он не работает.

Answer 1

Что именно вы имеете в виду, говоря, что это не работает? Вы пытались отобразить storeBooks, вычисленные на странице в этом компоненте? Что вы видите, когда делаете это:

<div>{{ storeBooks }}</div>

Если вы хотите отобразить каждую книгу, просто используйте v-for l oop:

<div v-for="book in storeBooks" :key="book.id">
  {{ book.title }}
</div>