Vuex Store - Get data from state store for viewing

Question

How do I get the data from an object in state store to display in my component fields?

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

Component:

 created() {
      this.$store.dispatch('allBooks')
    },

    computed: {
      storeBooks() {
        return this.$store.state.books
      },
    },

Now when I load the page of books, I want the fields for id, title and genre to be populated with data from the vuex store. I can't access the data in the object one by one. I tried using this.books.id = this.$store.books.id and it's not working.

Answer 1

What exactly do you mean by saying it's not working? Have you tried displaying storeBooks computed on the page in that component? What do you see when you do this:

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

If you want to display every book, just use a v-for loop:

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