【Laravel+Vue.js】アプリ制作の記録⑦DB連携(会員登録/ログイン機能)

import Vue from 'vue'
import VueRouter from 'vue-router'
import Register from './pages/Register.vue'
import Login from './pages/Login.vue'
import Board from './components/Board.vue' // add

Vue.use(VueRouter)

const routes = [
  // add
  {
    path: '/',
    component: Board
  },
  // up here
  {
    path: '/register',
    component: Register
  },
  {
    path: '/login',
    component: Login
  }
]

const router = new VueRouter({
  mode: 'history', 
  routes
})

export default router

<template>
  <div>
    <header>
      <h1><router-link to="/">My Note</router-link></h1> // edit
      <router-link to="Login">ログイン</router-link> // add
      <router-link to="Register">会員登録</router-link> // add
    </header>
    <main>
      <RouterView />
    </main>
    <footer>
      <div v-for="(list, index) in listing" :key="index">
        <h1>{{list.created_at}}</h1>
        <h1>{{list.title}}</h1>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listing :[]
    };
  },
  components: {
  },
  mounted() { 
    this.$http.get("/api/list").then(response => {
      this.listing = response.data;
    });
  },
}
</script>

<template>
  <div>
    <h3>Login</h3>
  </div>
</template>

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    lists:[
      {
        title: '',
        cards: []
      }
    ],
  },
  actions: {
    addlist(context, payload) {
      context.commit('addlist', payload)
    },
    removelist(context, payload) {
      context.commit('removelist', payload)
    },
    addCardToList(context, payload) {
      context.commit('addCardToList', payload)
    },
    removeCardFromList(context, payload) {
      context.commit('removeCardFromList', payload)
    },
  },
  mutations: {
    addlist(state, payload) {
      state.lists.push({ title: payload.title, cards:[] })
    },
    removelist(state, payload) {
      state.lists.splice(payload.listIndex, 1)
    },
    addCardToList(state, payload) {
      state.lists[payload.listIndex].cards.push({ body: payload.body })
    },
    removeCardFromList(state, payload) {
      state.lists[payload.listIndex].cards.splice(payload.cardIndex, 1)
    },
  },
  getters: {
    totalCardCount(state) {
      let count = 0
      state.lists.map(content => count += content.cards.length)
      return count
    },
  }
})

export default store

<template>
  <div class="container--small">
    <ul class="tab">
      <li
        class="tab__item"
        :class="{'tab__item--active': tab === 1 }"
        @click="tab = 1"
      >Login</li>
      <li
        class="tab__item"
        :class="{'tab__item--active': tab === 2 }"
        @click="tab = 2"
      >Register</li>
    </ul>
    <div class="panel" v-show="tab === 1">
      <form class="form" @submit.prevent="login">
        <label for="login-email">Email</label>
        <input type="text" class="form__item" id="login-email" v-model="loginForm.email">
        <label for="login-password">Password</label>
        <input type="password" class="form__item" id="login-password" v-model="loginForm.password">
        <div class="form__button">
          <button type="submit" class="button button--inverse">login</button>
        </div>
      </form>
    </div>
    <div class="panel" v-show="tab === 2">
      <form class="form" @submit.prevent="register">
        <label for="username">Name</label>
        <input type="text" class="form__item" id="username" v-model="registerForm.name">
        <label for="email">Email</label>
        <input type="text" class="form__item" id="email" v-model="registerForm.email">
        <label for="password">Password</label>
        <input type="password" class="form__item" id="password" v-model="registerForm.password">
        <label for="password-confirmation">Password (confirm)</label>
        <input type="password" class="form__item" id="password-confirmation" v-model="registerForm.password_confirmation">
        <div class="form__button">
          <button type="submit" class="button button--inverse">register</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tab: 1,
      loginForm: {
        email: '',
        password: ''
      },
      registerForm: {
        name: '',
        email: '',
        password: '',
        password_confirmation: ''
      }
    }
  },
  computed: {
    apiStatus () {
      return this.$store.state.auth.apiStatus
    }
  },
  methods: {
    login () {
      console.log(this.loginForm)
    },
    async register () {
      await this.$store.dispatch('auth/register', this.registerForm)
      this.$router.push('/')
    },
    async login () {
      await this.$store.dispatch('auth/login', this.loginForm)
      if (this.apiStatus) {
        this.$router.push('/')
      }
    },
    async logout (context) {
      const response = await axios.post('/api/logout')
      context.commit('setUser', null)
    }
  }
}
</script>

const state = {}
const getters = {}
const mutations = {}
const actions = {}

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}