vuexjs getter with argument

zujrkrfu  于 2023-11-21  发布在  Vue.js
关注(0)|答案(6)|浏览(200)

有没有一种方法可以将参数传入vuexstore的getter中?类似于:

  1. new Vuex.Store({
  2. getters: {
  3. someMethod(arg){
  4. // return data from store with query on args
  5. }
  6. }
  7. })

字符串
所以在组件中我可以使用

  1. <template>
  2. <div>
  3. <p>{{someMethod(this.id)}}</p>
  4. </div>
  5. </template>
  6. <script lang="ts">
  7. import { mapGetters } from "vuex"
  8. export default {
  9. props: ['id'],
  10. computed: mapGetters(['someMethod'])
  11. }
  12. }
  13. </script>


但是在vuex中,第一个参数是state,第二个是另一个getters。这可能吗?

0h4hbjxa

0h4hbjxa1#

ES6的箭头函数在这里也能很好地工作。例如,sake,假设你正在商店中寻找一个特定的'东西'。

  1. new Vuex.Store({
  2. getters: {
  3. someMethod: (state) => (id) => {
  4. return state.things.find(thing => thing.id === id)
  5. }
  6. },
  7. })

字符串
下面是Vuex文档中的另一个示例

ef1yzkbh

ef1yzkbh2#

一种方法可以是:

  1. new Vuex.Store({
  2. getters: {
  3. someMethod(state){
  4. var self = this;
  5. return function (args) {
  6. // return data from store with query on args and self as this
  7. };
  8. }
  9. }
  10. })

字符串
然而,getter不接受参数,原因在thread中解释:
命名约定有点令人困惑,getter表示可以以任何形式检索状态,但实际上它们是reducer。
也许我们应该让归约器成为纯方法,它可以用于过滤,Map等。
getter可以被赋予任何上下文。类似于computed,但你现在可以在vuex选项中将计算 prop 合并组合到getter中。这有助于组件的结构。

编辑:

一个更好的方法来实现同样的事情将使用ES6箭头,如nivram80的答案中详细说明的那样,使用方法风格的getters,您可以通过返回getter的函数来传递参数:

  1. new Vuex.Store({
  2. getters: {
  3. someMethod: (state) => (id) => {
  4. return state.things.find(thing => thing.id === id)
  5. }
  6. };
  7. }
  8. })

展开查看全部
lp0sw83n

lp0sw83n3#

你可以通过返回一个函数来传递参数给getter。当你想在store中查询一个数组时,这特别有用:

  1. getters: {
  2. // ...
  3. getTodoById: (state) => (id) => {
  4. return state.todos.find(todo => todo.id === id)
  5. }
  6. }

字符串
在vue组件中:

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


请注意,通过方法访问的getter将在每次调用它们时运行,结果不会缓存。
以上答案来自官方Vue文档:https://vuex.vuejs.org/guide/getters.html#method-style-access

展开查看全部
nkhmeac6

nkhmeac64#

你可以像这样使用MapGetters助手,一旦定义了store getters:

  1. new Vuex.Store({
  2. getters: {
  3. someMethod(state){
  4. return (value) => {
  5. return value;
  6. }
  7. }
  8. }
  9. })

字符串
然后像这样从一个组件调用getter:

  1. <script>
  2. import { mapGetters } from "vuex"
  3. export default {
  4. computed: {
  5. ...mapGetters(['someMethod'])
  6. },
  7. mounted() {
  8. console.log(this.someMethod('hello world')); // then logs "hello world"
  9. }
  10. }
  11. </script>

展开查看全部
qnzebej0

qnzebej05#

我不认为这是一个vuex.getter应该做的。
首先,正如你在上面所有的例子中看到的,getter只能被Map为一个计算的

  1. <script>
  2. import { mapGetters } from "vuex"
  3. export default {
  4. computed: {
  5. ...mapGetters(['someGetter'])
  6. },
  7. mounted() {
  8. console.log(this.someGetter); // a computed is not a method.
  9. }
  10. }
  11. </script>

字符串
如果你需要它来接收参数,你需要的是一个方法,而不是一个计算的。
我建议你使用store.action代替:

  1. new Vuex.Store({
  2. actions: {
  3. someMethod({ state }, arg){
  4. // do something with state.someValue and the arg
  5. return someTransformationOfYourState;
  6. }
  7. }
  8. })


as动作和变化可以被Map为方法。你可以这样使用它:

  1. <script>
  2. import { mapActions } from "vuex"
  3. export default {
  4. computed: {
  5. },
  6. mounted() {
  7. // now you can use someMethod with args in your component
  8. this.someMethod('the arg');
  9. },
  10. methods: {
  11. ...mapActions(['someMethod'])
  12. },
  13. }
  14. </script>


动作的第一个参数是存储本身,所以你可以从那里访问状态。与分派和提交函数相同。

注意,一个动作只能 * 接收一个参数(有效载荷),所以如果你需要发送更多的参数,你必须把它们都 Package 在一个对象或数组中。

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

展开查看全部
hts6caw3

hts6caw36#

对于那些使用以下vuex表示法来调用getter的人:$this.$store.getters['store/someMethod']
你只需要实现你的getter方法如下:

  1. new Vuex.Store({
  2. getters: {
  3. someMethod: (state) => (id) => {
  4. return state.things.find(thing => thing.id === id)
  5. }
  6. },
  7. })

字符串
通过添加id参数来调用someMethod getter,如下所示:

  1. $this.$store.getters['store/someMethod'](thing.id)

展开查看全部

相关问题