Use Vuex store to handle films

pages/films/index.vue

@@ -11,6 +11,7 @@
 
 <script>
 import Grid from "@/components/Grid";
+import { mapState } from "vuex";
 
 export default {
   name: "Films",
@@ -18,14 +19,11 @@ export default {
   head: {
     titleTemplate: "%s - Films"
   },
-  async asyncData({ $axios }) {
+  async asyncData({ store }) {
-    const films = await $axios.$get("/api/films");
+    await store.dispatch("getFilms");
-    return { films };
   },
-  data() {
+  computed: {
-    return {
+    ...mapState(["films"])
-      films: []
-    };
   }
 };
 </script>

store/index.js

@@ -1,7 +1,18 @@
-export const state = () => ({});
+export const state = () => ({
+  films: []
+});
 
-export const mutations = {};
+export const mutations = {
+  setFilms: (state, films) => {
+    state.films = films;
+  }
+};
 
-export const actions = {};
+export const actions = {
+  async getFilms({ commit }) {
+    const films = await this.$axios.$get("/api/films");
+    commit("setFilms", films);
+  }
+};
 
 export const getters = {};