<template>
  <section class="py-4">
    <img
      class="w-full max-w-md mx-auto mb-8"
      src="~/assets/images/logo.png"
      alt="Studio Ghibli"
    />
    <Grid :dataSource="films" />
  </section>
</template>

<script>
import Grid from "@/components/Grid";
import { mapState } from "vuex";

export default {
  name: "Films",
  components: { Grid },
  head: {
    titleTemplate: "%s - Films"
  },
  async asyncData({ store }) {
    await store.dispatch("getFilms");
  },
  computed: {
    ...mapState(["films"])
  }
};
</script>

<style></style>
