web-dev-qa-db-ja.com

vue js getter with argument

vuexstoreのゲッターにパラメーターを渡す方法はありますか？何かのようなもの：

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で、2番目は他のgettersです。出来ますか？

javascriptvue.jsvuejs2vuex
22
Sly

これを行う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
       };       
    }
  }
})

ただし、ゲッターは引数を取りません。その理由は、この thread で説明されています。

命名規則はやや混乱します。ゲッターは状態を任意の形式で取得できることを示しますが、実際にはレデューサーです。

おそらく、還元剤は純粋なメソッドである必要があります。フィルタリング、マッピングなどに使用できます。

その後、ゲッターに任意のコンテキストを与えることができます。計算に似ていますが、計算された小道具をvuexオプションのゲッターに結合できるようになりました。コンポーネントの構造化に役立ちます。

編集：

同じことを達成するためのより良い方法は、 nivram80 の答えで詳しく説明されているES6矢印を使用し、 メソッドスタイルゲッター を使用して渡すことですゲッターから関数を返すことによるパラメーター：

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

ここでもES6矢印関数がうまく機能します。たとえば、ストアで特定の「もの」を探しているとしましょう。

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

Vuex documentation を介した別の例です

20
nivram80