App.vueからVuexのstoreにアクセスできない

Question

前提

Vuexを使用して状態管理を行い、ドロップダウンメニューを作成しています。

実現したいこと

ナビゲーションバー(ヘッダー)に設置しているユーザーアイコンをクリックするとドロップダウンが開き、ドロップダウンが開いた状態でウィンドウのどこかをクリックすると閉じられる。という処理を実装したいです。

発生している問題・エラーメッセージ

ドロップダウンを開く処理をNavigationBar.vueに、閉じる処理をApp.vueに記述しているのですが、App.vueからstoreにアクセスしようとした場合のみundefinedとなり失敗してしまいます。

Uncaught TypeError: Cannot read properties of undefined (reading 'state')

該当のソースコード

storeの定義をstore.jsで行い、それをmain.jsでインポートしています。
App.vueでNavigationBar.vueをインポートしており、ドロップダウンを開くときはNavigatioBar.vueのopenDropDownが実行され、閉じるときはApp.vueのaddEventListenerToCloseDropDownで設置したイベントによって閉じられるという想定です。
開く処理は正常に実行されるのですが、閉じる処理で上記のエラーが発生してしまいます。

src/main.js

import Vue from 'vue';
import App from '@/App.vue';
import '@/assets/css/tailwind.css';
import router from '@/router';
import axios from '@/plugins/axios';
import VeeValidate from '@/plugins/vee-validate';
import store from '@/plugins/store';

if(process.env.VUE_APP_ENV_MODE === 'development') {
  Vue.config.productionTip = true;
} else {
  Vue.config.productionTip = false;
}

new Vue({
  router,
  axios,
  VeeValidate,
  store,
  render: h => h(App),
}).$mount('#app');

src/store.js

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

Vue.use(Vuex);

const store = new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production',
  state: {
    dropDownIsOpen: false
  },
  mutations: {
    openDropDown(state) {
      state.dropDownIsOpen = true
    },
    closeDropDown(state) {
      state.dropDownIsOpen = false
    }
  },
  actions: {

  },
  getters: {

  }
})

export default store;

src/App.vue

<template>
  <div id="app" class="flex flex-row">
    <NavigationBar />
    <router-view class="mt-14" />
  </div>
</template>

<script>
import NavigationBar from './components/NavigationBar.vue'

export default {
  name: 'App',
  components: {
    NavigationBar
  },
  mounted() {
    this.addEventListenerToCloseDropDown();
  },
  methods: {
    addEventListenerToCloseDropDown() {
      window.document.addEventListener('click', function() {
        if(this.$store.state.dropDownIsOpen) {
          this.$store.commit('closeDropDown');
        } else if(this.$store.state.dropDownIsOpen === false) {
          ;
        }
      })
    }
  }
}
</script>

src/components/NavigationBar.vue

<template>
  <header class="fixed w-full h-14 bg-white py-2.5 px-6 flex justify-between border-b-2 border-gray-200">
    <router-link to="/" class="text-3xl text-black font-bold">Kiite</router-link>
    <nav class="flex flex-end items-center space-x-4 text-gray-500">
      <router-link to="/articles">記事</router-link>
      <router-link to="/">チャット</router-link>
      <button class="h-full" @click="openDropDown()">
        <img src="@/assets/icon-sample.png" alt="" class="h-full object-contain">
      </button>
      <router-link to="" class="flex items-center justify-center bg-blue hover:bg-blue-dark text-white rounded-lg w-20 h-8">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 43.536 43.471" class="h-4">
          <path d="M9.8,45.055H11.98L37.856,19.12l-2.24-2.181L9.8,42.816ZM45.872,16.645,38.151,8.923l2.358-2.358a3.628,3.628,0,0,1,2.741-1.09,4.04,4.04,0,0,1,2.8,1.149l2.24,2.181a3.5,3.5,0,0,1,1.09,2.77,4.027,4.027,0,0,1-1.208,2.711ZM8.208,48.946A2.316,2.316,0,0,1,5.85,46.588V42.226a2.221,2.221,0,0,1,.177-.884,2.447,2.447,0,0,1,.53-.766L35.675,11.4,43.4,19.061,14.279,48.238a2.355,2.355,0,0,1-.8.53,2.439,2.439,0,0,1-.914.177ZM36.8,18,35.616,16.94l2.24,2.181Z" transform="translate(-5.85 -5.474)" fill="#ffffff"/>
        </svg>
        <span class="leading-4 ml-1.5">投稿</span>
      </router-link>
      <div v-if="this.$store.state.dropDownIsOpen" class="absolute bg-white top-16 right-28 py-2 border shadow-xl rounded-lg">
        <ul class="w-full h-full text-black">
          <li class="hover:bg-gray-100 w-full h-8 px-3 leading-8"><router-link :to="{ name: 'userHome', params: {user_id: this.currentUserId} }" class="block w-full">{{ this.currentUser.name }}</router-link></li>
          <li class="hover:bg-gray-100 w-full h-8 px-3 leading-8"><router-link :to="{ name: 'settingsAccount' }" class="block w-full">アカウント設定</router-link></li>
        </ul>
      </div>
    </nav>
  </header>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      currentUser: "",
      currentUserId: ""
    }
  },
  mounted() {
    this.setCurrentUserId();
    this.setUser();
  },
  methods: {
    setCurrentUserId() {
      this.currentUserId = localStorage.getItem('current_user_id');
    },
    setUser() {
      axios.get(process.env.VUE_APP_API_BASEURL + '/users/' + this.currentUserId)
      .then((response) => {
        this.currentUser = response.data;
      });
    },
    openDropDown() {
      this.$store.commit('openDropDown');
    }
  }
}
</script>

補足情報（FW/ツールのバージョンなど）

vue: 2.6.14
vuex: 3.6.2

Answer 1

問題の原因は記述しているファイルがApp.vueであることではなく、関数内の処理が悪かったようです。
下記のように修正したら意図した通りの動作をするようになりました。

    addEventListenerToCloseDropDown() {
      window.addEventListener('click', this.closeDropDown = (event) => {
        const navigationBarIcon = document.getElementById('navigation-bar-icon');
        if (event.target !== navigationBarIcon && this.$store.state.dropDownIsOpen === true) {
          this.$store.commit('closeDropDown');
        } else {
          ;
        }
      });
    }