[Vue] Typescript로 작성한 Mixin 에서 this 접근

바로 전에 작성한 글이랑 이어지는건데, 사실 오류는 같이 발생하고 있었다.

아무튼 이번엔 또 무엇이 문제인가 하니 mixin 파일에 작성한 class 내의 전역변수를 함수에서 읽지를 못했다.

접근 범위를 private에서 public 으로도 바꿔보고(별 차이 없다는걸 알았지만 그래도..) 생성자도 만들어보고 했는데 도무지 대체 도대체~ beforeCreate/created 함수나 따로 호출해야 하는데나 this 로 전역에 접근하려고 하면 죄다 undefined 만 찍고 있어서 눈도 돌고 머리도 돌고 그냥 돌아버리는 줄..

 

그래서 열심히 열심히 또 구글링을 한 결과 this 바인딩 문제였다.

그 전에도 한번 화살표 함수에 대해서 짤막하게 메모를 남긴걸로 기억하는데, 함수 내에서 전역변수에 접근하려면 global 로 등록을 하거나 (맞나?) 화살표 함수를 써야 한다고 했던 것 같은데 아무튼 그렇다. 화살표 함수를 쓰니 this로 접근이 가능했다.. 그러면 mixin 내 모든 함수들은 화살표 함수로 바꿔야 하는가? 하면 일단은 그렇다. 그리고 뭐 명확하게 하는게 좋으니까.

아래는 참고한 글

https://norux.me/61

[Typescript] class에서 'this' 를 사용할 때 주의사항

 

아 그리고 화살표함수로 변경하니까 hook 으로 실행되던 함수들이 (beforeCreate/created) 자동으로 실행이 안 돼서 생성자를 만들어주고 그 안에서 호출시켰다. 휴.. 버거웠다..

 

아무튼 vue 기본 포멧인 javascript ES6 랑 typescript 로 작성하는거랑 비슷한 듯 다른 부분이 많아서 힘겹다!

이게 구조를 잘 쓰고 있는건지도 계속 의심되고 허허