한번은하자 2024. 6. 12. 22:45

이번에 새롭게 vue를 이용한 사이드 프로젝트를 이용하면서 vue에 대한 흐름을 대략적이나마 이해하게 되었는데

아직은 자유롭게 쓰는 느낌이 아니라 약간의 이해만 가지고 쓰는 느낌이 난다.... 명령어에 대해 복기하면서 공부한다.

 

차근차근 App.vue부터..

App.vue

- 루트 Component로써 웹이 실행되는데 가장 핵심적인 역할을 한다.

- 전역 컴포넌트로써 하위 컴포넌트에 특별한 조치를 취하지 않는 이상 하위 컴포넌트에 영향을 간다.

 

 

App.vue와 store.js

 

현재 나의 App.vue와 vuex를 import한 store.js 코드 상태이다.

 

1. store.commit("setAccount", id);

- 개인적인 공부 공간이기 때문에 다른 곳은 이해가 가고 이해됐으므로 Pass

- setup()에 있는 store.commit 부분이 이해가 안 간다.

   순서 : →  store.commit("setAccount", id)를 하는 순간 store객체 mutation 객체 중에 setAccount라는 값을 함수를 실행한     다. 그 후 id를 통해 받은 payload를 상위에 있는 state()에 있는 id에 넣는다는 것이다. 

 

    그래도 이해가 안 간다면?

→ 

 

※ 꼬꼬무

 

1) 메모리적으로 하위 컴포넌트에 영향이 가면 App.vue에서 라이브러리를 import를 하는 것이 좋을까?

    아니면 필요한 곳(ex. test1.vue, test2.vue)에서만 import하는 것이 좋을까?

    → 메모리적으로 두 개의 큰 차이는 없다. 그러므로 App.vue에서 특정 js파일로 import하는 것이

        가시적으로도 좋으므로 프로젝트에서는 app.vue에서 각각의 라이브러리를 js파일을 따로 두고

         import하는 방식으로 진행하자.