Функция имени Vuex с пространством имен в геттерах

Question

Привет мне нужно создать функцию, которая имеет полезную нагрузку. В Vuex я создал:

const getters = {
  [GettersTeam.GET_TEST](state) {
    return state.teams;
  },
  [GettersTeam.GET_TEAM]: state => id => {
    console.log("Run function!");
    console.log(id);
    return state.teams;
  },
};

Далее я использую эту функцию в компоненте:

mounted() {
    this.GET_TEAM(1);
},
methods: {
    ...mapGetters('TeamModule', [GettersTeam.GET_TEAM]),
},

Функция this.GET_TEAM(1) ничего не возвращает. Я думаю, что проблема с функцией name [GettersTeam.GET_TEAM], но я не знаю, как я могу назвать функцию с помощью namespaced. Функция this.GET_TEST() работает правильно.

РЕДАКТИРОВАТЬ:

Я переместил функцию с methods на computed.

computed: {
    ...mapGetters('TeamModule', {
        teamList: [GettersTeam.GET_TEAM],
    }),
},

<template>
    <div>
        teamList: {{ teamList }}
    </div>
</template>

Но когда Я пытаюсь использовать teamList в шаблоне Vue вернул мне это:

teamList: function (id) {console.log (id); возвращение гос. команд; }

Answer 1

Вам нужно поместить mapGetters в ваш computed раздел, а не methods:

computed: {
    ...mapGetters('TeamModule', [GettersTeam.GET_TEAM]),
},

https://vuex.vuejs.org/guide/getters.html#the -mapgetters-helper

Это может показаться немного нелогичным, если вы вызываете его как метод, но с точки зрения компонента это все еще просто свойство. Так уж получилось, что свойство возвращает функцию.

Обновление:

На основе нового вопроса ...

В вашем шаблоне вы ' у нас есть {{ teamList }}. Это будет захват значения свойства this.teamList.

Свойство this.teamList является вычисляемым свойством, поэтому Vue вызовет определяющую функцию за кулисами. Эта определяющая функция создается mapGetters, но она фактически просто вызывает получатель хранилища, передавая ему соответствующий state объект.

Вы определили получатель следующим образом:

[GettersTeam.GET_TEAM]: state => id => {

Игнорируйте немного в скобках, это не важно здесь. Ключевой бит - это часть state => id => {. Здесь есть две функции, одна возвращается другой.

Фактически это эквивалентно следующему:

[GettersTeam.GET_TEAM] (state) {
  return function (id) {
    console.log("Run function!");
    console.log(id);
    return state.teams;
  }
}

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

Чтобы получить значение, возвращаемое внутренней функцией, вам нужно вызвать его. Например:

{{ teamList(1) }}

Я бы также отметил, что ваша текущая реализация геттера просто игнорирует id. Непонятно, что именно вы пытаетесь сделать, но я предполагаю, что вы собираетесь реализовать поиск, основанный на id, чтобы найти конкретную запись в state.teams.

Answer 2

Сделал Codepen для вас.

Ваш mapGetters вызов должен быть mapGetters([GettersTeam.GET_TEAM]), а ваш this.GET_TEAM(1); вызов должен быть this[GettersTeam.GET_TEAM](1); вместо.