한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online를 들으며 정리한 내용입니다.

Vuex(Store) 구성

store을 구성해보도록 하겠습니다.

1. 기본 구조

1-1. 터미널

$ npm i vuex@next

1-2. src>store>index.js

index.js

import { createStore } from 'vuex'

export default createStore({
  modules: {
    
  }
})

스토어를 생성해주는 createStore함수를 가져와 export default를 통해 실행시켜줍니다.

createStore함수의 인수로 객체리터럴을 만들어 modules라는 속성을 추가해줍니다.

여기서의 modules는 movie, about에 대한 여러가지 데이터 타입들에 대한 모듈이 연결되는 구조를 만듭니다.

1-3. store 연결

main.js
이렇게 만든 index.js을 main.js에 연결해줍니다.

import {createApp} from 'vue'
import App from './App'
import router from './routes/index.js'
import store from './store/index.js'

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

특정한 폴더에 들어있는 index라는 파일을 가져올 때는 파일명을 생략할 수 있습니다.
따라서 아래와 같이 작성할 수 있습니다.

import {createApp} from 'vue'
import App from './App'
import router from './routes'
import store from './store'

2. store모듈 생성

movie.js와 about.js파일을 store폴더 내부에 생성해줍니다.

movie.js에는 영화와 관련된 정보를, about.js는 개발자 및 사용자와 관련된 정보를 다룰 수 있도록 모듈을 만들어볼 예정입니다.

export default {
  //movie.js가 하나의 store안에서 모듈화되어 사용될 수 있음을 명시
  namespaced : true,
  // 실제로 취급해야하는 각각의 data(==data)
  state: () => ({
    movies: []
}),
  // 계산된 상태를 만들어내는 개념(==computed)
  getters: {
      movieIds(state) {
      return state.movies.map(m => m.imdbID)
    }
  },
  // mutations와 actions에는 각각의 함수를 만들 예정
  //✅mutations를 통에서만 데이터를 변경할 수 있습니다.
  mutations: {
      resetMovies(state) {
      state.movies = []
    }
  },
   //actions의 함수들은 비동기로만 동작
  //✅async, await를 붙이지 않아도 비동기로만동작한다.
  actions: {
    searchMovies({state, getters, commit}) {
    }
  }
}

Store의 Mutations을 실행할 때는 .commit()메소드를, Actions를 실행할 때는 .dispatch()메소드를 사용합니다.

★acitions

actions {
  searchMovies(context){
     context.state
     cotext.getters
     context.commit
  }
}
===
actions {
  searchMovies({state, getters, commit}){
     context.state
     cotext.getters
     context.commit
  }
}  

• searchMovies()함수를 이용해 movies라는 데이터에 접근을 해 무엇인가를 활용해야한다고 하는 경우라면, state를 직접 불러 올 수는 없으며 context라는 객체데이터를 불러와 그 context.state, context.getters, context.commit으로 불러봐야합니다.
• 이를 객체구조분해를 이용해searchMovies({state, getters,commit})로 불러올 수 있습니다

3. index.js

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

export default creatStore({
  modules: {
    movie,
    about
  }
})