带参数的 vuexjs getter

Question

有没有办法将参数传递给 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 。可能吗？

原文由 Sly 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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 不接受参数，为什么在这个 线程 中解释：

命名约定有点混乱，getter 表示可以以任何形式检索状态，但实际上它们是 reducer。

也许我们应该让 reducer 成为纯方法。可用于过滤、映射等。

然后可以给 getter 任何上下文。与计算类似，但您现在可以将计算道具与 vuex 选项中的 getter 组合起来。这有助于组件的结构。

编辑：

实现相同目的的更好方法是使用 nivram80 的答案中详述的 ES6 箭头，使用 方法样式的 getter ，您可以通过从 getter 返回函数来传递参数：

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

原文由 Saurabh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

ES6 箭头函数在这里也可以很好地工作。例如，清酒，假设您正在商店中寻找特定的“东西”。

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

这是另一个来自 Vuex 文档 的示例

原文由 nivram80 发布，翻译遵循 CC BY-SA 4.0 许可协议