javascript - this のコンテキストは、エクスポートするモジュールに提供されません

Question

質問の構成に不満があります。改善を提案することをお勧めします。また、無知（迷惑につながる無知）のために、問題の診断に欠陥がある可能性があることに注意してください。申し訳ありません。

この回答では、使用することが提案されていますが、未定義this.$store.xxxであるため、私のコードでは失敗します。thisコードの作成者 (つまり私) が愚かなことをしているのではないかと強く疑っているので、私のコンポーネント レイアウトの回路図を示します。

これが意図する方法は、2 つのコンポーネントを作成するランディング ページindex.jsを用意することです。1 つはアプリケーションのビジュアル用で、もう 1 つは情報の保存用です。ビジュアルアプリは、ナビゲーション バー (および後でレンダリング領域) で構成されます。navbar は、テーブル、リストなどを表示するさまざまな *.vue ファイルをレンダリングするストア (および表示領域) にコマンドをディスパッチします。

では、なぜthis is undefinedというテキストが表示されるのでしょうか? 私の構造は完全に欠陥がありますか、それともあちこちで細部が欠けているだけですか?

index.js

import Vue from "vue"
import Store from "./vuex_app/store"
import App from "./vuex_modules/app.vue"
new Vue({ el: "#app-base", components: { App }, store: Store });

store.js

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const state = { ... };
const mutations = { ... };
export default new Vuex.Store({ state, mutations });

app.vue

<template><div id="app">App component<navigation></navigation></div></template>
<script>
import navigation from "./navigation.vue"
export default { components: { navigation } }
</script>

ナビゲーション.vue

<template><div id="nav-bar"><p v-on:click="updateData">Update</p></div></template>
<script>
import { updateData } from "../vuex_app/actions";
export default {
  vuex: {
    actions: { updateData },
    getters: { ... }
  },
  methods: {
    updateData: () => { 
      console.log("this is " + this);
      this.$store.dispatch("updateData");
    }
  }
}
</script>

アクション.js

export const updateData = ({dispatch}, data) => { 
  console.log("invoked updateData"); 
  dispatch("UPDATE_DATA", data); 
};