[Vue.js] Vuex1: Vuex 셋팅하기

💡 실습 포인트!

---

💜 Vuex 사용하는 이유 알아보기

• Vuex 라이브러리는 필수로 설치해야 하는 라이브러리는 아니다.

🤍 props 와 custom event 로 데이터를 주고받는 게 힘들 때 사용한다.

• Vuex 를 설치하면 js 파일 하나에다가 모든 데이터를 저장하는 것이 가능하다.
• 그리고 이로 인해, 모든 Component 들은 데이터를 직접 꺼내어 사용하고 수정할 수 있다.
• props 를 사용할 필요 없이 모든 Component 가 데이터에 직접적으로 접근이 가능해지는 것이다.

---

🤍 Vue 파일과 데이터가 너무 많을 경우 사용한다.

• Vuex 라는 라이브러리를 상태관리(데이터관리) 라이브러리라고 한다.
• 만약 하나의 데이터를 여러 Component 에서 사용하다가 갑자기 에러가 발생한다면, 어디서 에러가 발생했는지 찾기 위해 데이터를 사용하는 모든 곳을 다 확인해야한다.
• 하지만 Vuex 를 사용하면 데이터뿐만 아니라 데이터를 수정하는 방법조차도 한 곳에서 모두 관리할 수 있으므로 디버깅하기가 쉽다는 장점이 있다.
• 따라서 큰 프로젝트를 진행할 때에는 Vuex 를 사용하는 것이 좋으나, 작은 프로젝트에서는 오히려 활용하는 것에 비해 불필요하게 코드만 길어지는 상황이 발생할 수 있으므로, 적절하게 판단하여 사용해야 한다.

---

💜 Vuex 라이브러리 사용하기

🤍 Vuex 설치하기

• 구글에 Vuex 를 검색하여 Vuex 홈페이지에 접속해서 Installation 탭에 들어가면 위와 같이 터미널에 입력해야하는 설치 명령어를 확인할 수 있다.
• 위 두 코드 중에 원하는 코드를 골라서 터미널에 입력하면 설치가 된다.

---

🤍 Vuex 셋팅하기

import { createStore } from 'vuex'

const store = createStore({
  state(){
    return {
      
    }
  },
})

export default store

• Vuex 라이브러리가 설치되면 작업 폴더 내의 src 폴더 안에 store.js 를 만들고 위와 같이 코드를 작성해준다.

 

import store from './store'

app.use(store).mount('#app')

• 이제 main.js 파일에 store.js 파일을 store 라는 이름으로 import 해주고, app.mount('#app') 이라는 코드를 위와 같이 수정해준다.
  (나는 store 라는 이름으로 export / import 를 진행했지만 다른 이름을 쓰고 싶다면 다른 이름으로 지어도 상관은 없다.)

---

🤍 Vuex 사용하기

• 위 과정까지 모두 완료하면 store.js 에 저장한 데이터들은 모든 Component 가 가져다 사용하는 것이 가능하다.
• 데이터 저장은 store.js 에다 하면 되고, vue 파일에서 사용할 때에는 $store.state.데이터이름 과 같은 형식으로 사용하면 된다.
• 함수나 mounted 안에서 사용하고 싶다면 this.$store.state.데이터이름 과 같은 형식으로 사용하면 된다.