CODEWITHSUNDEEP
vue.jsvuex
Jim E Russel
Jim E Russel

Reputation: 495

Vuex Store - Get data from state store for viewing

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.

Upvotes: 1

Views: 1732

Answers (1)

AlekseyHoffman
AlekseyHoffman

Reputation: 2694

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>

Upvotes: 1

Related Questions