<template>
  <div class="fruits">
    <h2>Directory</h2>
    <Grid :data="this.fruits" />
  </div>
</template>

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

export default {
  name: "Fruits",
  components: { Grid },
  computed: {
    ...mapState(["fruits"])
  },
  async created() {
    await this.$store.dispatch("getFruits");
  }
};
</script>
