vuexjs 인수 getter

vuexjs 인수 getter

파라미터를 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.가능합니까?

이를 위한 한 가지 방법은 다음과 같습니다.

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는 상태를 어떤 형식으로든 검색할 수 있음을 나타내지만 실제로는 축소판입니다.

아마도 우리는 환원제를 순수한 방법으로 만들어야 할 것이다.필터링이나 지도 작성 등에 사용할 수 있습니다.

getters는 임의의 컨텍스트를 지정할 수 있습니다.계산과 비슷하지만 이제 vuex 옵션의 getter에 계산된 소품을 결합할 수 있습니다.컴포넌트 구조에 도움이 됩니다.

편집:

nivram80의 응답에 자세히 나와 있는 ES6 화살표를 사용하여 getter에서 함수를 반환함으로써 파라미터를 전달할 수 있는 메서드 스타일의 getter를 사용하는 것이 같은 것을 실현하는 더 좋은 방법입니다.

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

여기서도 ES6 화살표 기능이 잘 작동합니다.예를 들어, 사케, 당신이 당신의 가게에서 특정한 물건을 찾고 있다고 가정해 봅시다.

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

다음은 Vuex 매뉴얼을 사용한 다른 예입니다.

함수를 반환하여 getters에 인수를 전달할 수 있습니다.이는 저장소의 배열을 쿼리할 때 특히 유용합니다.

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

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>

이것이 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, ...});

언급URL : https://stackoverflow.com/questions/41503527/vuexjs-getter-with-argument