vuexjs getter with argument

Question

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

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不接受参数,为什么在这个帖子中解释:

命名约定有点令人困惑,getters表示状态可以以任何形式检索,但实际上它们是reducer.

也许我们应该让减速器成为纯粹的方法.哪个可用于过滤,映射等.

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

编辑:

更好的方法是使用ES6箭头,如nivram80的答案中详细说明的那样,使用方法样式的getter,你可以通过从getter返回一个函数来传递参数:

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

Answer 2

ES6箭头功能也适用于此.例如,假设您在商店中寻找特定的"东西".

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

这是Vuex文档的另一个例子

Answer 3

您可以通过返回一个函数将参数传递给 getter。当您要查询存储中的数组时，这特别有用：

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

在你的 vue 组件中：

store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

请注意，通过方法访问的 getter 将在您每次调用它们时运行，并且不会缓存结果。

以上答案摘自Vue官方文档：https : //vuex.vuejs.org/guide/getters.html#method-style-access

Answer 4

一旦定义了存储 getter，您就可以像这样使用 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>

Answer 5

我不认为这就是 vuex.getter 的目的。

首先，正如您在上述所有示例中所看到的，getter 可以映射为仅计算的

<script>
    import { mapGetters } from "vuex"

    export default {
     computed: {
     ...mapGetters(['someGetter'])
     },
     mounted() {
       console.log(this.someGetter); // a computed is not a method.
     }       
}
</script>

如果你需要它来接收参数，你需要的是一个方法，而不是一个计算方法。

我建议您改用 store.action ：

new Vuex.Store({
  actions: {
    someMethod({ state }, arg){
       // do something with state.someValue and the arg
       return someTransformationOfYourState;
    }
  }
})

因为动作和突变可以映射为方法。你可以这样使用它：

<script>
    import { mapActions } from "vuex"

    export default {
     computed: {
     
     },
     mounted() {
       // now you can use someMethod with args in your component 
       this.someMethod('the arg');
     },
     methods: {
     ...mapActions(['someMethod'])
     },       
}
</script>

操作的第一个参数是存储本身，因此您可以从那里访问状态。与调度和提交功能相同。

请注意，一个操作只能接收一个参数（有效负载），因此如果您需要发送更多参数，则必须将所有参数包装在一个对象或数组中

this.someMethod({ arg1, arg2, ...});