初学者必見！Headerにある項目を動的に変化させる方法

今回は、ログインしている時だけ「ログアウト」ボタンを表示させたいと思ったので、そのやり方を備忘録として書いていきます。

最後まで見て、よかったらLGTMお願いします！！（今じゃなくていいです）

それでは順を追って説明します。

Vuexの機能を使い、sotre/index.jsのstateにユーザーがログインしているかを判断するauthを設定します。

store/index.js

import Vue from "vue";
import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex);

export default new Vuex.Store({
  plugins: [createPersistedState()],  //永続的にログインできるプラグイン
  state: {
    auth: "", //userがログインしているか
    user: "", //user情報
  },
)}

vuex-persistedstateについてはこちらの記事でご紹介しているので、ぜひご覧ください。

次に、computedを使って、authの変更を検知します。
computedは自動で値の変更を検知してくれるので大変便利です。

components/Header.vue

<div class="headB" :class="{'open' : isClass}">
          <ul>
            ～
            <li>
              <a @click="logoutButton" v-if="auth === true">ログアウト</a>
              <a @click="loginButton" v-else>ログイン</a>
            </li>
          </ul>
 </div>

<script>
export default{
    computed: {
      auth() {
        return this.$store.state.auth;  //store/index.jsのstateにあるauthを取得
      }
    },
}
</script>

これでログインしているときにログアウトが表示されるようになります。

これはHeaderだけでなく、他にも応用できそうですね。

以上、「Headerにある項目を動的に変化させる方法」でした。