Vue 프로젝트 Vuex(Store) 구성

 

Vue 프로젝트 Vuex(Store) 구성

 

1. npm i vuex@next

2. /src/store 폴더 생성

3. /src/store/index.js 파일 생성

/* /src/store/main.js */

import { createStore } from 'vuex'

export default createStore({
  modules: {
    
  }
})

 

4. 생성한 index.js 파일을 /src/main.js 연결 (store 연결)

/* main.js */

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

/* .use() 특정한 플러그인 연결 */
createApp(App)
  .use(router)
  .use(store)
  .mount('#app')

 

5. /src/store/about.js 파일 생성 (나중에 작성)

 

6. /src/store/movie.js 파일 생성

/* /src/store/movie.js */
/* 영화 검색과 관련된 데이터를 취급하는 용도 */

export default {
  // module
  namespaced: true,
  // data
  state: () => ({
    movies: []
  }),
  // computed
  getters: {
    movieIds(state) {
      return state.movies.map(m => m.imdbID)
    }
  },
  // methods (mutations, actions)
  // 변이 (store 데이터를 변경)
  mutations: {
    resetMovies(state) {
      state.movies = []
    }
  },
  // 비동기
  actions: {
    searchMovies() {

    }
  }
}

 

7. /src/store/index.js 에서 모듈로 가지고 와서 연결 (movie.js, about.js)

/* /src/store/index.js */

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

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

 

모든 vue 파일에서 전부 가지고 와서 사용할 수 있다

 

---

 

참고

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

What is Vuex? | Vuex

 

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

Vuex가 무엇인가요? | Vuex