vuexjs getter 带参数

Question

有没有办法将参数传递给 vuex store 的 getter？类似于：

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 不接受参数，原因在 thread:

中有解释

the naming convention is slightly confusing, getters indicates state can be retrieved in any form, but in fact they are reducers.

Perhaps we should have reducers being pure methods. Which can be used for filtering, mapping ect.

getters then can be given any context. Similar to computed, but you can now combine computed props to getters in vuex option. Which helps structure of components.

编辑：

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

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

Answer 2

ES6 箭头函数在这里也能很好地工作。例如，假设您正在商店中寻找特定的 'thing'。

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

这是另一个例子 Vuex documentation

Answer 3

您可以像这样使用 MapGetters 助手，一旦定义了商店 getters:

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 4

您可以通过返回函数将参数传递给 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 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, ...});

vuexjs getter 带参数

vuexjs getter with argument

javascript

vue.js

vuex

vuejs2