본문 바로가기
Vue.js

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

by bryan.oh 2021. 1. 1.
반응형

 

+ 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 를 파라메터로 넘깁니다.

 

 

 

 

728x90
반응형

'Vue.js' 카테고리의 다른 글

[Vue] route 에서 url parameter 받아오기  (0) 2021.01.04
[Vue] ESLint 사용하기  (0) 2021.01.01
[Vue] Vuetify 설정 #npminstall vuetify  (0) 2021.01.01
[Vue] Cookie 사용하기  (0) 2021.01.01
[Vue] webpack-simple 빌드하기 npm run build  (0) 2020.12.30

댓글