没有提供给模块导出的上下文

Question

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

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

它的目的是我有一个登录页面 index.js，它创建了两个组件 - 一个用于应用程序的视觉效果，一个用于存储信息.视觉 App 将包含一个导航栏（以及稍后的渲染区域）。导航栏将向商店（和查看区域）发送命令，呈现不同的 *.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>

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 offers a pretty nice reactive type, minimalist JavaScript framework. Unfortunately, per 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.

没有提供给模块导出的上下文

The context of this not provided to the modules exporting

javascript

vue.js

vuex