Question

我开始制作通用输入vue组件。在我担心更改输入中的数据之前，我只是想从商店获取初始值。

我有这样的事情：

<template lang="html">
  <input class="input-text" type="text" name="" :value="value">
</template>

<script>
import store from '@/store/index';

export default {
  name: 'InputText',
  props: [
    'dataModel',
    'propertyName',
  ],
  computed: {
    value() {
      return store.state[this.dataModel][this.propertyName];
    },
  },
};
</script>

这很有效。而不是value中的computed函数。我想利用mapGetters。所以我尝试了这样的事情：

...mapGetters({
  value: `${this.dataModel}/${this.propertyName}`,
}),

一旦我尝试了后者，我就undefined和this.dataModel获得了this.propertyName。调用this时mapGetters的上下文会因新对象而发生变化。有没有办法将组件道具传递给mapGetters？有没有办法将this的上下文设置为组件而不是对象参数？或者我原来的方法/另一种方法是解决这个问题的正确方法吗？

Answer 1

首先，不要在组件中导入商店，它可用this.$store，因此请删除：

import store from '@/store/index';

您不能像使用mapGetters一样使用this因为它在您尝试使用它的上下文中不存在。在设置属性时，组件仍处于生命周期的早期阶段。据我所知，必须事先定义名称。

你可以将组件道具传递给mapGetters vuex

1 个答案: