Vuex: Loading data using axios, deserializing JSON API relationships (Building a VueJS app Part 2)
UPDATE: stuck because you don't have a server? Check out this new video where we use MirageJS to mock a backend API: • Using MirageJS to mock a backend API ...
In this tutorial we'll learn a huge amount about data handling with Vuex and VueJS -- how to load data from the server, how to handle relationships, and how to deal with JSON-API.
Specifically, we'll cover accessing VueX state (directly and through getters), dispatching VueX actions, using VueX mutations, setting up Axios calls, and deserializing the JSON API format into something more directly usable.
In our app, we'll implement a tag system to organize and navigate through our videos.
0:00 Start
1:59 Connecting to a REST server
10:24 Putting server data into Vuex
20:45 JSON-API
25:58 Data Relationships
45:19 The Tags page
Previous video in series: • Building a VueJS app - Part 1 - Getti...
Next video in series: • Vuetify: Make a VueJS app look good, ...
Playlist link: • Building a VueJS screencasting app fr...
Github link for today's code: https://github.com/jeffreybiles/vue-s...
Github links for server at different states of capability:
REST for videos: https://github.com/jeffreybiles/vue-s...
JSON API for videos: https://github.com/jeffreybiles/vue-s...
JSON API for videos + tags: https://github.com/jeffreybiles/vue-s...
** Find me online! **
Twitter: / vuescreencasts
Website: https://www.vuescreencasts.com/
#VueX #JSONAPI #Axios #VueJS #Vue #Tutorial