Nuxt 구성 요소를 사용하여 vuex getter 메서드에 매개 변수를 전달하는 방법은 무엇입니까?(3개의 도트 표기법을 유지하면서)

Nuxt 구성 요소를 사용하여 vuex getter 메서드에 매개 변수를 전달하는 방법은 무엇입니까?(3개의 도트 표기법을 유지하면서)

목표: vuex 상태 객체(MATCH_DATA)에서 프로펠러 값(topicId)에 대한 변경 사항을 확인합니다.그래서 워처를 MATCH_DATA [ topicId ]로 설정하고 싶습니다.그리고 MATCH_DATA[topicId]가 갱신될 때마다 함수를 호출하고 싶습니다(이러한 경우 로깅만 합니다).

단, MATCH_DATA는 getter이기 때문에 파라미터를 전달하려면 어떻게 해야 합니까?vuex getter는 파라미터를 받아들이도록 설계되지 않은 것 같습니다.나는 이것을 명시적으로 부르는 몇 가지 예를 보았다.$store.state.etc. 등입니다만, 현재 가지고 있는 3개의 도트 표기법을 유지하면서 이것을 실행할 수 있는 방법이 있습니까?

아니면 vuex getter를 사용하지 않고 이 목표를 달성할 수 있는 더 좋은 방법이 있을까요?

현재 코드:

Nuxt 컴포넌트:

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
    props: ['topicId'],

    computed: {
        ...mapGetters('sessionStorage', ['MATCH_DATA']),
    },

    watch: {
        MATCH_DATA (newMatchData, oldMatchData) {
            console.log(newMatchData);
        }
    },
    
    mounted() {
        this.SUBSCRIBE_TO_TOPIC(this.topicId);
    },
    
    methods: {
        ...mapActions('sessionStorage', ['SUBSCRIBE_TO_TOPIC'])
    }
}

vuex 스토어:

/* State */
export const state = () => ({
    MATCHES: {},
});

/* GETTERS */
export const getters = {
    MATCH_DATA: (state) => {
        return state.MATCHES;
    },
};

getter는 단순히 다음과 같은 함수를 반환할 수 있습니다.

export const getters = {
    MATCH_DATA: (state) => {
        return topicId => {
          // return something
        }}
    },
};

그런 다음 계산된 속성을 생성하여 이러한 getter에 액세스할 수 있습니다.

export default {
  computed: {
    ...mapGetters('sessionStorage', ['MATCH_DATA']),

    yourComputedProperty () {
      return this.MATCH_DATA(this.topicId)
    }
  }
}

그런 다음 계산된 속성을 보고 변경에 대응할 수 있습니다.

watch: {
  yourComputedProperty (newData, oldData) {
    console.log(newData);
  }
}

언급URL : https://stackoverflow.com/questions/69168363/how-to-use-a-nuxt-component-to-pass-a-parameter-to-a-vuex-getter-method-while