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中解释：

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

也许我们应该让减速器成为纯粹的方法。哪个可用于过滤，映射等。
     然后可以给出任何上下文。与计算类似，但您现在可以将计算出的道具与vuex选项中的getter相结合。这有助于组件的结构。

修改

实现相同目标的更好方法是使用nivram80的答案中详细说明的ES6箭头，使用method style getters，您可以通过从getter返回函数来传递参数：< / p>
new Vuex.Store({ getters: { someMethod: (state) => (id) => { return state.things.find(thing => thing.id === id) } }; } })

Answer 2

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

td

这里是通过Vuex documentation

的另一个示例

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

我不认为这是 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>

操作的第一个参数是存储本身，因此您可以从那里访问状态。与 dispatch 和 commit 函数相同。

注意，一个动作可以只接收一个参数（有效载荷），所以如果你需要发送更多，你必须将它们全部包装在一个对象或数组中

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

Answer 5

一旦定义商店吸气剂，您就可以使用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>

vuexjs getter with argument

5 个答案: