未提供给模块导出的上下文 [英] The context of this not provided to the modules exporting

问题描述

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

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

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

那么，我怎么会看到文本this is undefined?是我的结构完全有缺陷还是我只是在这里和那里遗漏了一个小细节?

index.js

从vue"导入Vue从./vuex_app/store"导入商店从./vuex_modules/app.vue"导入应用程序new Vue({ el: "#app-base", components: { App }, store: Store });

store.js

从vue"导入Vue；从vuex"导入 Vuex；Vue.use(Vuex);const state = { ... };const 突变 = { ... };导出默认新 Vuex.Store({ state, mutations });

app.vue

<脚本>从./navigation.vue"导入导航导出默认{组件:{导航}}

navigation.vue

<template><div id="nav-bar"><p v-on:click="updateData">更新</p></div></template>;<脚本>从 "../vuex_app/actions" 导入 { updateData };导出默认{Vuex:{动作:{更新数据}，吸气剂:{ ... }},方法: {更新数据:() =>{console.log("这是" + 这个);this.$store.dispatch("updateData");}}}

actions.js

export const updateData = ({dispatch}, data) =>{console.log("调用更新数据");dispatch("UPDATE_DATA", 数据);};

解决方案

Vue.js 提供了一个非常好的反应式类型，极简的 JavaScript 框架.不幸的是，根据此链接，可能会有一些不寻常的使用要求.在这种情况下，

<块引用>

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

I'm displeased with the formulation of the question. Feel encouraged to suggest an improvement. Also, please keep in mind that due to ignoyance (ignorance leading to annoyance), I might have flawed diagnostics of hte issue. Sorry about that.

In this answer it's suggested to use this.$store.xxx and it fails in my code because this is undefined. I strongly suspect something stupid being done by the author of the code (that would be me), so I'll present the schematics of my component layout.

The way it's intended is that I have a landing page index.js that creates two components - one for the visuals of the application and one for the storage of information. The visual App will consist of a navigation bar (and a rendering area later on). The navbar will dispatch commands to the store (and to the viewing area) rendering different *.vue files showing tables, lists etc.

So, how come I get to see the text this is undefined? Is my structure entirely flawed or am I just missing a small detail here and there?

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); 
};

解决方案

Vue.js offers a pretty nice reactive type, minimalist JavaScript framework. Unfortunately, per this link there may be some unusual usage requirements. In this case,

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.

这篇关于未提供给模块导出的上下文的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！