[Vue] store 여러개 js 파일 사용

 

+ store
--+ modules
----+ cart.js
----+ products.js
--+ index.js

store 폴더 안에 index.js 생성

store 폴더 아래에 modules 폴더를 생성

modules 폴더 아래에 여러개의 js 파일을 생성하고

각각 필요한 state, getters, actions, mutations 등을 생성하고 export default 합니다.

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
}

 

store > index.js 

import Vue from 'vue'
import Vuex from 'vuex'
import cart from './modules/cart'
import products from './modules/products'

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
  modules: {
    cart,
    products
  },
  strict: debug
})

 

 

사용 예

<script>
import { mapGetters, mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      checkoutStatus: state => state.cart.checkoutStatus
    }),
    ...mapGetters('cart', {
      products: 'cartProducts',
      total: 'cartTotalPrice'
    })
  },
  methods: {
    checkout (products) {
      this.$store.dispatch('cart/checkout', products)
    }
  }
}
</script>

 

state.cart. 으로 store/modules/cart.js 의 state 를 접근할 수 있습니다.

 

...mapGetters('cart', { products: 'cartProducts', total: 'cartTotalPrice' })

로 cart.js 의 getters 중 cartProducts 를 products 라는 이름으로 현재 vue에서 사용한다는 뜻입니다.

 

dispatch는 'cart/checkout' 으로 

cart.js 의 action 에 있는 checkout 을 호출하고 products 를 파라메터로 넘깁니다.