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 }) {
-    const films = await $axios.$get("/api/films");
-    return { films };
+  async asyncData({ store }) {
+    await store.dispatch("getFilms");
   },
-  data() {
-    return {
-      films: []
-    };
+  computed: {
+    ...mapState(["films"])
   }
 };
 </script>