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: https://youtu.be/gGosCQzPCVg

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: https://www.youtube.com/watch?v=vaCrzaeC-RE
Next video in series: https://www.youtube.com/watch?v=sKrBNGw94eQ
Playlist link: https://www.youtube.com/playlist?list=PLPwpWyfm6JADRf8x1Jc0Da8R71WJyt-Jn

Github link for today's code: https://github.com/jeffreybiles/vue-screencasts/commit/610c1a738b9e66284a9befd42a5602a5b223aad6

Github links for server at different states of capability:
- REST for videos: https://github.com/jeffreybiles/vue-screencasts-server/tree/117d5a666d876650dafee8613c499f270fef3eb4
- JSON API for videos: https://github.com/jeffreybiles/vue-screencasts-server/tree/0d1a380979caa6418143bb811ad1e983608c20c3
- JSON API for videos + tags: https://github.com/jeffreybiles/vue-screencasts-server/tree/259cb61df3cbd6c64948fffdc1e337c9ca6c68ee

*** Find me online! ***

Twitter: https://twitter.com/VueScreencasts
Website: https://www.vuescreencasts.com/

#VueX #JSONAPI #Axios #VueJS #Vue #Tutorial

Видео Vuex: Loading data using axios, deserializing JSON API relationships (Building a VueJS app Part 2) канала Vue Screencasts