[Vue.js][Ch4][영화검색 사이트] Vuex(Store) 구성

Vuex 패키지 설치

npm i vuex@next

• vue.js 3버전에 해당하는 store인 vuex@next로 설치

Vuex(Store) 구성

1. src > store 폴더 생성

2. src > store > index.js 파일 생성 : store를 관리해주는 구성옵션을 정리해주는 파일

/* store를 관리해주는 구성옵션을 정리해주는 파일 */
import { createStore } from 'vuex'

/* createStore : 스토어를 생성해주는 함수 */
export default createStore({
  /* modules : 데이터 타입들의 모듈이 연결되는 구조(영화 정보 / 프로젝트 정보 구분) */
  modules: {      

  }
})

3. main.js에 store 연결

// App.vue 파일을 main.js에서 시작

import { createApp } from 'vue'   // 객체구조분해를 통해서 바로 createApp 가져옴
import { javascript } from 'webpack'
import App from './App'
import router from './routes/index.js'    // router 연결을 위해 import
import store from './store/index.js'      // store 연결을 위해 import

// html에서 app이라는 id를 가지고 있는 요소에 vue.js 프로젝트를 연결
// .use : 현재 프로젝트에서 특정한 플러그인을 연결할 때 사용
createApp(App)
  .use(router)
  .use(store)
  .mount('#app')

특정 폴더의 index라는 이름의 파일을 가져올 때는 파일을 생략해줄 수 있다.

특정 폴더를 import한다면 index라는 이름의 javascript 파일을 우선적으로 찾아서 적용해준다.

import router from './routes'    // router 연결을 위해 import
import store from './store'      // store 연결을 위해 import

• 기본적으로 사용하는 파일을 만들 땐, index라는 이름을 사용하는 것을 권장

4. store > movie.js 생성 (영화 정보와 관련된 데이터를 취급하는 모듈)

/* 영화 검색과 관련된 데이터를 취급하는 파일 */

export default {
  /*
  * namespaced : 해당 파일이 모듈화돼서 사용할 수 있다는 것을 나타내는 옵션.(true / false)
  * state : 실제로 취급해야하는 데이터. store 개념에서는 data를 state라고 부른다.(data와 같은 개념)
  * getters : 계산된 상태를 만들어내는 개념.(computed와 같은 개념)
  * mutations : 변이라는 뜻. 관리하는 데이터를 변경시켜줄 수 있는 methods. mutations에서만 데이터를 수정할 수 있다.
  * actions : 비동기로 동작하는 methods. 데이터를 수정할 수 없다. state 옵션 사용 불가능 -> context 사용해야한다.
  * - context.state / context.getters / context.commit 사용 => 객체구조분해를 통해 {state, getters, commit} 으로 사용할 수 있다.
  */
  namespaced: true,
  state: () => ({
    movies: []
  }),
  getters: {
    movieIds(state) {   // 인수 state는 상단의 state 옵션이다. -> state에 있는 데이터를 연결할 수 있다. 
      return state.movies.map(m => m.imdbID);   // imdbID로만 구성된 배열 만들어냄
    }
  },
  mutations: {
    resetMovies(state) {
      state.movies = [];
    }
  },
  actions: {
    searchMovies({state, getters, commit}) {
      
    }
  } 
}

• namespaced : 해당 파일이 모듈화돼서 사용할 수 있다는 것을 나타내는 옵션.(true / false)
• state : 실제로 취급해야하는 데이터. store 개념에서는 data를 state라고 부른다.(data와 같은 개념)
• getters : 계산된 상태를 만들어내는 개념.(computed와 같은 개념)
• mutations : 변이라는 뜻. 관리하는 데이터를 변경시켜줄 수 있는 methods. mutations에서만 데이터를 수정할 수 있다.
• actions : 비동기로 동작하는 methods. 데이터를 수정할 수 없다. state 옵션 사용 불가능 -> context를 인수로 사용해야한다.
  • context.state / context.getters / context.commit 사용 => 객체구조분해를 통해 {state, getters, commit} 으로 사용할 수 있다.

5. movie.js / about.js를 index.js에 연결

/* store를 관리해주는 구성옵션을 정리해주는 파일 */
import { createStore } from 'vuex'
import movie from './movie.js'    // 영화 모듈
import about from './about.js'    // 프로젝트 정보 모듈

/* createStore : 스토어를 생성해주는 함수 */
export default createStore({
  /* modules : 데이터 타입들의 모듈이 연결되는 구조(영화 정보 / 프로젝트 정보 구분) */
  modules: {      
    movie, // movie: movie
    about
  }
})

참고

구글에 vuex next 검색 > https://vuex.vuejs.org/ 이동 > vuex 개념 참고