Vuexjs getter с аргументом

Есть ли способ передать параметр в getter vuex store? Что-то вроде:

new Vuex.Store({
  getters: {
    someMethod(arg){
       // return data from store with query on args
    }
  }
})

Так что в компоненте я мог бы использовать

<template>
    <div>
        <p>{{someMethod(this.id)}}</p>
    </div>
</template>
<script lang="ts">
    import { mapGetters } from "vuex"

    export default {
        props: ['id'],
        computed: mapGetters(['someMethod'])
        }
    }
</script>

но в первом аргументе vuex есть state, а второй - другой getters. Возможно ли это?

Ответы

Ответ 1

Один из способов сделать это может быть:

new Vuex.Store({
  getters: {
    someMethod(state){
      var self = this;
       return function (args) {
          // return data from store with query on args and self as this
       };       
    }
  }
})

Тем не менее, getter не принимает аргументы и почему объясняется в этой теме:

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

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

тогда получателям можно дать любой контекст. Аналогично computed, но теперь вы можете комбинировать вычисленные реквизиты с геттерами в опции vuex. Который помогает состав компонентов.

Редактировать:

Лучшим способом достижения того же результата будет использование стрелки ES6, как подробно описано в ответе nivram80, с использованием методов получения стиля метода, где вы можете передать параметр, возвращая функцию из метода получения:

new Vuex.Store({
  getters: {
    someMethod: (state) => (id) => {
        return state.things.find(thing => thing.id === id)
      }
    };       
  }
})

Ответ 2

Функция со стрелкой ES6 здесь тоже подойдет. Например, ради, скажем, вы ищете определенную "вещь" в вашем магазине.

new Vuex.Store({
  getters: {
    someMethod: (state) => (id) => {
        return state.things.find(thing => thing.id === id)
      }
    };       
  }
})

Вот еще один пример через документацию Vuex

Ответ 3

Вы можете использовать помощник MapGetters следующим образом, определив получатели хранилища:

new Vuex.Store({
  getters: {
    someMethod(state){
       return (value) => {
          return value;
       }
    }
  }
})

Затем вызовите getter из такого компонента:

<script>
    import { mapGetters } from "vuex"

    export default {
     computed: {
     ...mapGetters(['someMethod'])
     },
     mounted() {
       console.log(this.someMethod('hello world')); // then logs "hello world"
     }       
}
</script>