2022-09-28: [vuex] unknown getter (vuex.esm.js?e4c8:1023)

Vuex를 활용한 프론트 작업 중 컴포넌트에서 store의 action을 불러와야 하는 일이 있었다.

그런데 계속해서 [vuex] unknown getter: (action name) 에러가 떴다.

 

해당 action이 axios 요청을 처리하는 것이기 때문에 axios 에러인가 싶어서 store를 사용하지 않고 컴포넌트 자체에서 그 함수를 똑같이 구현해봤다. 그런데 결과는 잘 나왔다.

결국 문제는 store에 있었고, 답을 찾아냈다.

 

현재 프로젝트의 store 구조는 다음과 같이 store 밑에 여러 모듈이 있다.

• store
  • modules
    • a.js
    • b.js
  • index.js

이렇게 module 안에 여러 js 파일을 만들어서 각각 상이한 기능을 담당하는 경우가 많은데, 이때 각 js 파일 안에서 namespaced를 지정할 수 있다.

namespaced를 쓰는 이유는 크게

1. store에 대해서 각 기능을 분리했다는 것을 알리기 위해

2. store/modules 폴더 안에 있는 js 파일들 중 이름이 겹치는 state/getters/actions 등등이 있을 수 있기 때문에

두 가지로 나눌 수 있다.

 

현재 내가 진행하고 있는 프로젝트에서는 1번의 이유로 한 모듈에 namespaced: true 코드가 들어있었다.

동시에 여러 명이 프론트 작업을 하고 있기 때문에 나는 namespaced가 설정되어 있는지를 모르고 아래와 같이 actions를 불러왔기 때문에 에러가 났던 것이었다.

// 모듈에 namespaced 설정이 되어 있지 않은 경우
methods: {
	...mapActions(['(action name)',]),
}

 

만약 namespaced에 대한 코드가 없다면 위와 같이 작성하고, namespaced: true 코드가 추가되어 있다면 아래와 같이 작성하면 된다.

// 모듈에 namespaced: true 설정이 되어있는 경우
methods: {
	...mapActions('(사용하는 module 이름)', ['(action name)',]),
}