<template>
  <v-app id="inspire">
    <one-navbar></one-navbar>
    <v-main>
      <div class="w-100 rounded-xl mb-6 bg-primary-lighten mr-2 pa-3">
        <h1 class="primary-lighten--text">Main component</h1>
        <h2>{{ email }}</h2>
        <v-btn color="primary" class="text-white">Secondary Button</v-btn>
        <v-btn
          class="text-white text-subtitle-1"
          color="primary"
          size="small"
          variant="flat"
        >
          Create Event
        </v-btn>
        <coba-component></coba-component>
      </div>
    </v-main>
  </v-app>
</template>

<script type="module">
  import CobaComponent from "./coba.vue";
  import NavbarComponent from "../../globalcomponent/one-navbar.vue";
  export default {
    name: "component2",
    components: {
      "coba-component": CobaComponent,
      "one-navbar": NavbarComponent,
    },
    computed: {
      // Akses state dari store
      count() {
        return this.$store.state.coba2.count;
      },
      email() {
        return this.$store.state.coba2.email;
      },
    },
    methods: {
      // Dispatch action ke store
      increment() {
        this.$store.dispatch("increment");
      },
    },
  };
</script>

<style scoped></style>
