Question

我有以下设置：

//someFile.Vue
<template>
 <ABC foo="myPath"/>
<template>
<script>
  import ABC from 'somewhere';
  export default {
    components: { ABC },
  }
</script>

// ABC.vue
<template>someData...</template>
<script>
  import { mapGetters } from 'vuex';
  export default {
    props: ['foo'],
    computed: {
      ...mapGetters({
        myTest: this.foo+"/someVuexAction',
      }),
    }
  }
</script>

但是，我始终收到消息“无法读取未定义的属性foo。我认为计算值可以读取道具。有什么我想念的吗？

Answer 1

您似乎正在根据from django.contrib import admin from mediaroles.models import Person, Role, Book, Movie, Media class RoleInline(admin.TabularInline): model = Role extra = 0 class PersonAdmin(admin.ModelAdmin): inlines = (RoleInline,) admin.site.register(Person, PersonAdmin) admin.site.register([Role, Book, Movie])属性值尝试访问一个vuex getter。问题是您的计算方法第一次被评估为foo（组件的实例）尚不存在。我不确定mapGetters是否可以处理this存在后进行的动态重新评估（我认为不是）。您可以尝试执行此操作（编辑：不起作用，请参阅第二个解决方案）：

this

这可能行不通，但是值得尝试。

第二种解决方案（更可能起作用）是按照以下方式定义计算的属性：

...mapGetters({
    myTest: this && this.foo ? this.foo+'/someVuexAction' : undefined
})

旁注：您使用的术语是computed: { myVuexGetter() { return this.foo ? this.$store.getters[this.foo+'/someVuexGetter'] : undefined }, }，但您是在someVuexAction内部使用的。如果不是拼写错误：您应该使用mapGetters来导入vuex操作，并且这些操作不是计算属性，而是方法。

Answer 2

但是mapGetters将映射到商店的功能。商店没有foo，您的组件没有。我认为您只想在计算的而不是映射的函数上放置一个常规函数。

考虑以下示例：

const store = new Vuex.Store({
  state: {
    counter: 5
  },
  getters: {
    counterCount: state => {
      return state.counter;
    }
  }
});

const {
  mapGetters
} = Vuex;

Vue.component("my-el", {
  props: {
    foo: Number
  },
  template: "<div>foo: {{foo}} | fooPlusOne: {{fooPlusOne}} | myTest: {{myTest}}</div>",
  computed: {
    fooPlusOne: function() {
      return this.foo + 1;
    },
    ...mapGetters({
      myTest: "counterCount"
    })
  }
});

const vm = new Vue({
  store,
  el: "#app"
});

<script src="https://unpkg.com/vue@2.5.22/dist/vue.min.js"></script>
<script src="https://unpkg.com/vuex@2.0.0/dist/vuex.min.js"></script>

<div id="app">
  <my-el :foo="8"></my-el>
</div>

Vue-将道具传递给计算机

2 个答案: