34. Vue - vuex 기본구조(store, module)

1. 설치 

- 터미널 입력: npm i vuex@next (vue 3버전 사용시) 

 

---

2. 설정 

a) src - store 폴더 생성 - index.js 파일 생성 

클릭하면 확대됩니다.

import {createStore} from 'vuex'

export default createStore({
  modules: {
    // Store 모듈이 구성되는 곳
  }
})

 

 

b) main.js에 index.js를 연결하기

import {createApp} from 'vue'
import App from './App'
import router from './routes/index.js'
import store from './store'
// 원래는 './store/index.js' 이렇게 경로를 작성해야 하는데, 
// 어떤 폴더안에 있는 index.js 파일을 가져올 때는 파일명을 생략할 수 있다. 
// 그러므로 자주 사용되는 파일을 만들 때 index라는 이름을 사용하는 것이 좋다. 

createApp(App)
  .use(router)
  .use(store)
  .mount('#app')

 

 

c) store 모듈의 기본구조

export default {
  // namespaced: 스토어 모듈임을 명시하는 속성(boolean)
  namespaced: true,

  // state: 데이터를 의미한다.
  state: () => ({ // function() { return {}} 이거랑 () => ({}) 이거랑 동일하다.
    movies: []

  }),

  // getters: state를 사용하여 computed와 동일한 기능을 수행한다.
  getters:{
    movieIds(state) {
      return state.movies.map(m => m.imdbID) 
      // (m => m.imdbID)의 의미: 매개변수 m을 받아서 m.imdbID로 반환한다. 
    }
  },

  // mutations: methods와 동일한 기능을 수행한다.
  // 주의사항: mutations를 통해서만 state의 값을 변경할 수 있다. 다른 곳에서는 값을 변경할 수 없다. 
  mutations: {
    resetMovies(state) {
      state.movies = []
    }
  },

  // actions: 값을 변경하는 메소드는 mutations에 작성하고 나머지 메소드는 actions에 작성한다.
  // 주의사항
  // 1. actions는 비동기적으로 작동한다. 
  // 2. actions는 state가 아닌 context에 접근이 가능하다. (context가 state를 포함하는 더 큰 개념)
  // 3. context는 state, getters, commit을 포함하고 있다. 
  // 4. 객체 구조분해를 사용하면 context = {state, getters, commit} 이다. 
  actions:{
    searchMovies(context) { // 매개변수를 context 대신 객체 구조분해하여 {state, getters, commit} 이렇게 작성 가능하며, 사용할 매개변수만 작성할 수 있다. 
      context.state,
      context.getters,
      context.commit
    }
  }
}

 

 

d) store에 모듈 연결하기

클릭하면 확대됩니다. 

 

[store - index.js]

import {createStore} from 'vuex'
import movie from './movie'
import about from './about'

export default createStore({
  modules: {
    movie, // 원래는 movie: movie로 입력되는 건데 키와 값이 동일하면 생략가능 
    about
  }
})

 

 

---

3. 참고자료 

 

[Vuex 공식문서] 

 

1. 한글문서 - Vue2에 해당하는 내용이라서 vuex의 개념 이해 용도로 사용

https://vuex.vuejs.org/kr/

Vuex가 무엇인가요? | Vuex

 

2. 영어문서 - Vue3에서 vuex를 사용하는 방법(한글문서 아직 안나옴)

https://next.vuex.vuejs.org/

What is Vuex? | Vuex

 

 

[JS - arrow function]

https://poiemaweb.com/es6-arrow-function

Arrow function | PoiemaWeb