Question

我对这个问题的表述感到不满。鼓励建议改进。此外，请记住，由于无知（无知导致烦恼），我可能会对hte问题进行有缺陷的诊断。对此感到抱歉。

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

它的目的是我有一个着陆页 index.js ，它创建了两个组件 - 一个用于应用程序的视觉效果，另一个用于存储信息。视觉 App 将包含导航栏（以及稍后的渲染区域）。导航栏将命令发送到商店（以及查看区域），呈现显示表格，列表等的不同* .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，可能会有一些不寻常的使用要求。在这种情况下，

不要在实例属性或回调上使用箭头函数（例如 vm。$ watch（'a'，newVal =＆gt; this.myMethod（）））。正如箭头功能一样绑定到父上下文，this将不是Vue实例你期望并且this.myMethod将是未定义的。

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

1 个答案: