programing

오류 발생 중 오류: [vuex] getters가 기능해야 하지만 저장소를 모듈로 분할할 때 VUEX 저장소에서 "getters.getters"가 {}입니다.

prostudy 2022. 8. 29. 21:21
반응형

오류 발생 중 오류: [vuex] getters가 기능해야 하지만 저장소를 모듈로 분할할 때 VUEX 저장소에서 "getters.getters"가 {}입니다.

저는 VUEX를 처음 접해 VUEX를 배우면서 테스트 애플리케이션을 구축합니다.VUEX 스토어를 모듈로 분할하고 각 모듈에는 getter.js 파일이 있습니다.각 모듈에 대한 getters, 액션, 돌연변이가 개별 index.js로 Import되며 메인스토어 index.js 파일로 Import됩니다.웹 사이트를 표시하는 동안 브라우저에 "Uncatched Error: [vuex] getters는 기능해야 하지만 "getters.getters"는 {}"이라는 오류가 나타납니다.또한 나는 지도 도우미와 함께 이것을 이루려고 노력했다.

누군가 이 오류를 해결하는 것을 도와주실 수 있나요?파일 내용에 대한 자세한 내용은 다음과 같습니다.

폴더 구조:

store
 modules
  coaches
   action.js
   getter.js
   action.js
   index.js
  requests
   action.js
   getter.js
   action.js
   index.js
 index.js

corches/index.files 내용은 다음과 같습니다.

import { createStore } from "vuex";
import mutations from "./mutations.js";
import actions from "./actions.js";
import getters from './getter.js';

export default createStore({
  namespaced: true,
  state: {
      coaches: [
        {
          id: "c1",
          firstname: "Gau",
          lastname: "Rau",
          area: "[finance,javascript,analysis]",
          description: "devloper for fun",
          age: "38",
        },
        {
          id: "c2",
          firstname: "Ran",
          lastname: "Bi",
          area: "[insurance,SQL,analysis]",
          description: "photographer for fun",
          age: "37",
        }
      ]
    },
  mutations: mutations,
  actions: actions,
  getters: {getters},
});

**coaches/getter.js file content:**

   

     export default {
            coacheslist(state){
                return state.coaches;
            },
            hasCoaches(state){
                return state.coaches && state.coaches.length >0;
            }
        };

**store/index.js file content is:**

import { createStore } from "vuex";
import CoachModule from "./modules/coaches/index.js";
import RequestModule from "./modules/requests/index.js";

export default createStore({
  modules: {
    Coaches: CoachModule, 
    Requests: RequestModule}
});

**File content which calls the getter:**

<script>
export default {
  computed: {
    filteredCoaches(){
      return this.$store.getters['Coaches/coacheslist']
    }
  }
}
</script>

getters를 1개의 파라미터로 오브젝트로 정의하고 있는 것이 문제인 것 같습니다.getters그걸 바꿔서getters: getters또는 ES6를 도입하여 다음과 같이 기술하는 것이 좋습니다.

export default createStore({
  namespaced: true,
  state: {
      ...
  },
  mutations,
  actions,
  getters,

가져오기 getters 변경:

import * as getters from './getters'

언급URL : https://stackoverflow.com/questions/68012447/getting-error-uncaught-error-vuex-getters-should-be-function-but-getters-get

반응형