diff --git a/pages/films/index.vue b/pages/films/index.vue
index 6ff11f2..e00de3a 100644
--- a/pages/films/index.vue
+++ b/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>
diff --git a/store/index.js b/store/index.js
index 5597adf..5d2de3a 100644
--- a/store/index.js
+++ b/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 = {};