Full-Stack Vue.js 2 and Laravel 5

Getters
Sometimes what we want to get from the store is not a direct value, but a derived
value. For example, say we wanted to get only those listing summaries that were
saved by the user. To do this, we can define a getter, which is like a computed
property for the store: state: { saved: [5, 10], listing_summaries: [ ... ] }, getters:
{ savedSummaries(state) { return state.listing_summaries.filter( item =>
state.saved.indexOf(item.id) > -1 ); } }
Now, any component that needs the getter data can retrieve it from the store as
follows: console.log(this.$store.state.getters.savedSummaries); /* [ 5 => [ ... ],
10 => [ ... ] ] */
Generally, you define a getter when several components need the same derived
value, to save repeating code. Let's create a getter which retrieves a specific
listing. We've already created this functionality in ListingPage, but since we're
going to need it in our router as well, we'll refactor it as a getter.
One thing about getters is that they don't accept a payload argument like
mutations do. If you want to pass a value to a getter, you need to return a
function where the payload is an argument of that function.
resources/assets/js/router.js: getters: { getListing(state) { return id =>
state.listings.find(listing => id == listing.id); } }
Let's now use this getter in our ListingPage to replace the previous logic.
resources/assets/components/ListingPage.vue: computed: {
listing() { return populateAmenitiesAndPrices(
this.$store.getters.getListing(this.$route.params.listing) ); }
}