Creating a Horror Movie Webapp

1

I’m trying to build a Horror Movie Web app.

  • A user can view all Horror movies (API call from TheMovieDB.org)
  • Add it to a watch-list (like a shopping cart)

I’m trying to understand the scope of Vuex, managing state, data, API calls, and pagination & how they integrate together. A few questions come to mind when trying to figure out the best way to approach this.

  • I am making the call to https://api.themoviedb.org/3/discover/movie?api_key=<<api_key>>&page=1&with_genres=27.
  • It responds with 20 movies w/details, the current page 1, total_results 19,480, total_pages 647.

For state I am think I will only need a few things:

state: {
  movieWatchlist: [],
  currentPage: 1,
  totalPages: 647,
}

Questions

  1. Would I add the response from the API to state? I will only need to be add the movies to the watchlist so I’m thinking I will only need (getters and actions) but I could be wrong
  2. How would I handle pagination?
    I am thinking I need a prevPage() and nextPage() to make subsequent API calls to .../3/discover/movie/<<api_key>>&page2? for each page of results. It would keep track of the currentPage in state.

Any help would be greatly appreciated!