フォロー機能の実装② ~フロントエンド~

#概要
Laravel x Vue.js(Vuex)でSPAに対応したフォロー機能を実装します。
今回はVue.jsでのフロントエンドの実装になります。
前回の記事はこちら→フォロー機能の実装①

最終的なUIはこんな感じ↓

##バーション
Laravel 8.12
Vue.js 2.5.17
Vuex 3.6.0
Vue Router 3.4.9

#実装
##store

store/follow.js

import axios from "axios";

const state={
    status: null,
};
const getters = {
    status: state =>state.status ? state.status: '',
};
const mutations = {
    setStatus(state,status){
        state.status = status;
    },
};
const actions = {
    async pushFollow(context, data){
        await axios.post('/api/follow',data).then(result=>{
            context.commit('setStatus',result.data);
        }).catch(error=>{
            console.log(error);
        })
    },
    async deleteFollow(context,data){
        await axios.delete('/api/follow', {data:data}).then(result=>{
            context.commit('setStatus', result.data);
        }).catch(error=>{
            console.log(error);
        })
    },
};

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

state.statusではフォローしているかしていないかtrue,falseで確認します。
pushFollow()はフォローするボタンを押した時に発火して、result.dataにはtrueが格納、
deleteFollow()はフォロー解除ボタンをを押した時に発火して、result.dataにはfalseが格納されます。

##template

Individual.vue

<template>
<div class="wrapper">
    <div class="containers">
        <div class="col-md-3"> 
                <div class="follow" @click="pushFollow" v-show="!followStatus" >
                    <i class="fas fa-user-plus"></i>
                </div>
                <div class="unfollow" @click="deleteFollow" v-show="followStatus">
                    <i class="fas fa-user-check"></i>
                </div>
        </div>
    </div>
</template>
<script>
export default {
    mixins: [MultipostAboidable],
    computed: {
        //相手側のユーザー情報
        postUser(){
            return this.$store.getters["individual/user"];
        },
        //自分のユーザー情報
        authUser(){
            return this.$store.getters["auth/user"];
        },
        //フォロー有無の確認
        followStatus(){
            return this.$store.getters["follow/status"];
        },
    },
    methods: {
        async pushFollow(){
            this.avoidMultipost(async()=>{
                this.$store.dispatch('follow/pushFollow', {auth_user: this.authUser.id, post_user:this.postUser.id});
            });
        },
        async deleteFollow(){
            this.avoidMultipost(async()=>{
                this.$store.dispatch('follow/deleteFollow', {auth_user: this.authUser.id, post_user:this.postUser.id});
            });
        },
    },
    mounted() {
        console.log('Individual mounted start!');
        this.$store.dispatch('follow/checkFollow', 
            {auth_user: this.authUser.id, post_user:this.postUser.id})
    },
}
</script>
<style scoped>
    .follow{
        display: inline-block;
        border: 1px solid #CFCABF;
        border-radius: 5%;
        padding:7px;
        cursor: pointer;
    }
    .unfollow{
        display: inline-block;
        border: 1px solid #CFCABF;
        border-radius: 5%;
        padding:7px;
        cursor: pointer;
    }
    .unfollow:hover{
        background-color: #2983FD;
        color: #FFF;
    }
    .follow:hover{
        background-color: #2983FD;
        color: #FFF;
    }
</style>

<div class="follow" @click="pushFollow" v-show="!followStatus" >

    <i class="fas fa-user-plus"></i>
</div>
<div class="unfollow" @click="deleteFollow" v-show="followStatus">
    <i class="fas fa-user-check"></i>
</div>

followStatusがfalse(フォローしていない)の場合、フォローするボタンを設置
true(すでにフォローしている)の場合、フォロー解除ボタンを設置します。

アイコンはfontAwesomeを利用しています。

#まとめ
以上でフォローするボタンを設置することができました。