vuex - login component

appLogin.js

Vuex.component('app-login', {
  template: `
<section>
  <header>
    <h1>Giriş yap</h1>
  </header>

  <main v-if="user">
    <p>{{ user.username }} olarak giriş yapıldı</p>
  </main>

  <main v-else>
    <p v-if="error">Giriş yapılamadı</p>

    <form @submit="submit">
      <fieldset>
        <legend>Giriş formu</legend>

        <label for="username">Kullanıcı adı</label>
        <input type="text" v-model="username" />

        <label for="password">Şifre</label>
        <input type="password" v-model="password" />
      </fieldset>
    </form>
  </main>
</section>
`,
  data: {
    error: false,
    username: '',
    password: '',
  },
  computed: mapState(['user']),
  methods: {
    submit($event) {
      if ($event) {
        $event.preventDefault();
      }

      this.$store
        .dispatch('login', {
          username: this.username,
          password: this.password,
        })
        .catch(() => (this.error = true));
    },
  },
});