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

Question

我对这个问题的表述很不满意。感到鼓舞，建议一个改进。此外，请记住，由于不光彩(无知导致烦恼)，我可能有错误的诊断hte问题。真对不起。

在这个答案中，建议使用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框架。不幸的是，每个此链接可能有一些不寻常的使用要求。在这种情况下，

不要对实例属性或回调使用箭头函数(例如，vm.$watch('a'，newVal => this.myMethod()。由于箭头函数绑定到父上下文，所以this将不是您所期望的Vue实例，而this.myMethod将是未定义的。