<template>
  <v-app id="inspire">
    <div class="hidden-md-and-up">
      <mobile-component></mobile-component>
    </div>
    <div class="hidden-sm-and-down">
      <dekstop-component></dekstop-component>
    </div>
  </v-app>
</template>

<script type="module">
  import MobileComponent from "./mobile.vue";
  import DekstopComponent from "./dekstop.vue";
  export default {
    name: "login",
    components: {
      "mobile-component": MobileComponent,
      "dekstop-component": DekstopComponent,
    },
    data() {
      return {
        visible: false,
      };
    },
    computed: {
      // Akses state dari store
      count() {
        return this.$store.state.login.count;
      },
      email: {
        get() {
          return this.$store.state.login.email;
        },
        set(val) {
          this.$store.commit("login/setEmail", val);
        },
      },
      password: {
        get() {
          return this.$store.state.login.password;
        },
        set(val) {
          this.$store.commit("login/setPassword", val);
        },
      },
    },
    methods: {
      // Dispatch action ke store
      increment() {
        this.$store.dispatch("increment");
      },
    },
  };
</script>

<style scoped></style>
