2

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

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

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

应用程序.vue

<template><div id="app">App component<navigation></navigation></div></template>
<script>
import navigation from "./navigation.vue"
export default { components: { navigation } }
</script>

导航.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>

动作.js

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

1 回答 1

2

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

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

于 2016-12-01T02:58:56.110 回答