vue экранирование дочернего объекта в качестве параметра

Question

Я хочу создать вспомогательную функцию, чтобы уменьшить количество избыточных строк кода. Вместо того, чтобы делать почти одно и то же снова и снова, я хочу использовать эту функцию, чтобы просто добавить параметр и уменьшить количество строк кода.

<template>
  <div>
    <!-- TODO: ADD ALL PROPS NOW! -->
    <UserInfo
      :user-name="userData.userName"
      :budget="userData.budget"
      :leftover="userData.leftover"
    />
    <UserIncExp />
  </div>
</template>

<script>
import UserInfo from '../User/UserInfo.vue';
import UserIncExp from '../User/UserIncExp/_UserIncExp.vue';
export default {
  components: {
    UserInfo,
    UserIncExp
  },
  data() {
    return {
      test: '',
      userData: {
        userName: '',
        budget: '',
        leftover: '',
        inc: [],
        exp: [],
        active: false
      }
    };
  },
  computed: {},
  watch: {
    '$route.params.userId': {
      handler() {
        this.loadUserDataFromState();
      }
    },
    immediate: true
  },
  created() {
    this.loadUserDataFromState();
  },
  methods: {
    loadUserDataFromState() {

      // this.userData.userName = this.$store.state.users[this.$attrs.userId].userName;
      // this.userData.budget = this.$store.state.users[this.$attrs.userId].salery;
      // this.userData.leftover = this.$store.state.users[this.$attrs.userId].leftover;

      this.helper(userName);
    },
    // CHECK HERE <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
    helper(data) {
      return this.userData.data = this.$store.state.users[this.$attrs.userId].data;
    }
  }
};
</script>

<style>
</style>

, но я не понимаю, почему я не могу использовать data в качестве параметра использовать его затем в выполняемой функции

Answer 1

Используйте обозначение в скобках примерно так:

loadUserDataFromState() {
  this.helper("userName");
},
helper(key) {
  this.userData[key] = this.$store.state.users[this.$attrs.userId][key];
}

helper ожидает ключ (который является строкой).

Примечание: helper не нужно ничего возвращать.

---

Альтернативный способ, который вообще не требует функции helper, - это использовать al oop над массивом ключей, например :

loadUserDataFromState() {
  for(let key of ["userName", "salery", "leftover"]) {
    this.userData[key] = this.$store.state.users[this.$attrs.userId][key];
  }
}

он просто перебирает ключи в массиве ["userName", "salery", "leftover"] и динамически копирует значения из исходного объекта в this.userData.