javascript - 未向导出的模块提供此上下文

Question

我对问题的表述感到不满意。受到鼓励提出改进建议。另外，请记住，由于无知(无知导致烦恼)，我对问题的诊断可能有缺陷。对此感到抱歉。

在 this answer建议使用 this.$store.xxx ，但在我的代码中失败，因为 this 未定义。我强烈怀疑代码的作者(也就是我)做了一些愚蠢的事情，所以我将展示我的组件布局的原理图。

它的目的是我有一个登陆页面index.js，它创建两个组件 - 一个用于应用程序的视觉效果，另一个用于存储信息。视觉应用程序将包含一个导航栏(以及稍后的渲染区域)。导航栏将向商店(和查看区域)发送命令，呈现不同的 *.vue 文件，显示表格、列表等。

那么，我怎么会看到文本这是未定义的？我的结构是否完全有缺陷，或者我只是遗漏了一些小细节？

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>

navigation.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>

actions.js

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

Answer 1

Vue.js提供了一个非常好的响应式、简约的 JavaScript 框架。不幸的是，根据this link可能有一些不寻常的使用要求。在这种情况下，

Don’t use arrow functions on an instance property or callback (e.g. vm.$watch('a', newVal => this.myMethod())). As arrow functions are bound to the parent context, this will not be the Vue instance as you’d expect and this.myMethod will be undefined.