54. Creating them item model

We've now got Vuex ORM setup successfully, including an Item model that we can now use.

You'll see in the finished version of the app that we see summaries of all our items displayed on the homepage.

We're now going to take the first steps towards implementing that functionality.

You'll see here in our Home component we're using this component ItemSummaries to display each item summary. There'a v-for here that we use to iterate through an array of items, and each item will be passed into a new instance of the component as a prop.

However, down in the component definition, you can see that items is currently a computed property that just returns an empty array. Let's now link this computed property to our Vuex store.

Loading Item model

To begin with, let's import the Item model into our component by going import Item from "@/store/models/Item";.

We'll then replace the empty array in the items computed property with the model method Item.all(). This method will return all the item instances in the store in an array.

Obviously we don't have any items in the store yet, so you still won't see anything on screen.

client/views/Home.vue

...
import Item from "@/store/models/Item";
export default {
  name: "Home",
  components: {
    ItemSummary
  },
  computed: {
    items: () => Item.all()
  }
};

Dummy item

In a moment we'll load the item data off our API. But to test if our current code is working, let's just create one dummy item instance.

We'll add a created hook to our component config. Inside that, we'll use the model method Item.create and pass in an object.

This method is used to create a new item instance as defined by the object we pass in.

We'll give this a property data, and assign to this a nested object with the properties id "1", a title "Starry Night", and an artist "Vincent Van Gogh".

client/views/Home.vue

export default {
  ...
  created () {
    Item.create({
      data: {
        id: "1",
        title: "Starry Night",
        artist: "Vincent Van Gogh"
      }
    });
  }
};

Once that rebuilds we can now see our dummy item has rendered in the home view. Let's check the Vuex tab of Vue Devtools and see what's going on here.

Firstly, notice we've got a mutation here entities/create. This is a result of the create method that we used. Looking at the payload, we can see the entity is "items" and the data is exactly what we passed in.

Next, if we check the state and look inside our items data, we can see an instance of the items model is now there.

There's also a getter in the store entities/items/all. That getter is aliased to the Item.all method we used and returns all the item entites in an array, which we now have linked to the items computed property in our component.

Discussion

1 comments