Vuex getter 메서드가 정의되지 않은 상태로 반환됨

Vuex getter 메서드가 정의되지 않은 상태로 반환됨

getter 메서드를 호출하려고 하는데 어떤 이유에서인지 호출이 되지 않습니다.console.log 스토어를 실행하면 정의되지 않은 것을 알 수 있습니다.

여기서 getter 메서드를 호출합니다.

computed: {
    client() {
        console.log(this.$store); //see above screenshot
        console.log(this.$route.params.id); //shows a valid value.
        //nothing seems to happen after this point, console.log in the below getter doesn't happen.
        return this.$store.getters['clients/clientById', this.$route.params.id];
    }
},

클라이언트의 getter를 다음에 나타냅니다.

 getters: {
    clients(state) {
        return state.clients;
    },
    hasClients(state) {
        return state.clients.length > 0;
    },
    clientById(state, id) {
        console.log('test'); //this doesn't happen
        return state.clients.find(client => client.id === id);
    }
}

처음 2개의 getter 메서드는 정상적으로 동작하고 있습니다.이것은, 콜시에 실행하고 있는 것과 같은 구문을 사용하고 있습니다.clientById겟터

클라이언트 오브젝트 배열을 설정하고 사용자가 클라이언트목록에서 클라이언트를 클릭하면 루트 파라미터에서 ID를 가져오면 해당 클라이언트 데이터가 페이지에 표시됩니다.제가 Vue에 처음 와보는 것뿐만 아니라 올바른 방법으로 접근하고 있는지에 대한 가이던스를 주시면 감사하겠습니다.

   state() {
     return {
       clients: [ 
         {
           id: null,
           client_name: '',
           address: '',
           city: '',
           state: '',
           zip:'',
           created_at: '',
           updated_at: '',
           deleted_at: null
         },
       ]
     };
   }, 

갱신:

문제가 생길 경우를 대비해서 clients.js 모듈 전체를 제공하겠습니다.다른 것은 정상적으로 동작하고 있는 것 같기 때문에, 이것이 관련이 있는지 없는지는 확실하지 않습니다.피드백에 따라 화살표 기능으로 변경한 게터 업데이트 버전입니다.이렇게 하면 다음 오류가 나타납니다.TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.

또한 getter 메서드 내에서 ID를 하드코딩하여 passed-in ID 파라미터에서 삭제해 보았습니다만, 정상적으로 동작하고 있는 것 같습니다만, 정의되어 있지 않기 때문에, 상태로부터 값을 취득할 수 없습니다.

import axios from "axios";

export default {
    namespaced: true,
    state() {
        return {
            isLoading: false,
            clients: [ 
                    {
                        id: null,
                        client_name: '',
                        address: '',
                        city: '',
                        state: '',
                        zip:'',
                        created_at: '',
                        updated_at: '',
                        deleted_at: null
                    },
                ]
            };
      },
  mutations: {
    setLoadingStatus(state, status) {
        state.isLoading = status;
    },
    setClients(state, clients) {
        state.clients = clients;
    }
  },
  actions: {
    async fetchClients(context) {
        context.commit('setLoadingStatus', true);
        try {
            const resp = await axios.get('http://localhost/api/clients');
            context.commit('setLoadingStatus', false);
            context.commit('setClients', resp.data);
        } catch(e) {
            console.log(e);
        }
    }
  },
  getters: {
    clients(state) {
        return state.clients;
    },
    hasClients(state) {
        return state.clients.length > 0;
    },
    clientById: (state) => (id) => {
        return state.clients.find(client => client.id === id);
    }
  }
};

설정 시도getter화살표 기능 포함:

clientById:(state) => (id) => {
  return state.clients.find(client => client.id === id);
}

컴포넌트에서 매핑할 수 있습니다.getters:

import { mapGetters } from 'vuex';
export default {
  computed: {
    ...mapGetters({
      clientById: 'clients/clientById'
    }),
    clientsId() {
       return this.clientById(this.$route.params.id)
    },
  }

언급URL : https://stackoverflow.com/questions/69334903/vuex-getter-method-returns-undefined