Full-Stack Vue.js 2 and Laravel 5

Retrieving saved items from the
database
Let's now work on retrieving the saved items from the database and displaying
them in the frontend. To begin with, we'll add a new saved property to the
metadata we put in the document head. This will be an empty array if the user is
logged out, or the array of saved listing IDs associated with that user, if they're
logged in.
app/Http/Controllers/ListingController.php: private function
add_meta_data($collection, $request) { return $collection->merge([ 'path' =>
$request->getPathInfo(), 'auth' => Auth::check(), 'saved' => Auth::check() ?
Auth::user()->saved : [] ]); }
Back in the frontend, we'll put the logic for retrieving the saved items in the
beforeEach router navigation guard. The reason we put it here and not in the addData
mutation is that we don't want to directly assign the data to the store state, but
instead call the toggleSaved mutation for each of the listings. You can't commit a
mutation from another mutation, so this must be done outside the store.
resources/assets/js/router.js: router.beforeEach((to, from, next) => { let
serverData = JSON.parse(window.vuebnb_server_data); if ( ... ) { ... } else if ( ...
) { ... } else { store.commit('addData', {route: to.name, data: serverData});
serverData.saved.forEach(id => store.commit('toggleSaved', id)); next(); } });
Let's also remove the placeholder listing IDs we added to saved in the previous
chapter so the store is empty upon initialization.
resources/assets/js/store.js: state: { saved: [], listing_summaries: [], listings: [],
auth: false }
With that done, we should find that the saved listings in the database now match
those in the frontend if we check with Vue Devtools: $ php artisan tinker >>>
DB::table('users')->select('saved')->first(); # "saved": "[1,5,7,9]"