Vuex 모듈 방식개발
Vuex 모듈 방식으로 개발
1. 모듈을 사용하는 이유
단일 상태 트리를 사용하기 때문에 애플리케이션의 모든 상태가 상대적으로 큰 개체에 집중된다. 애플리케이션이 매우 복잡해지면 저장소 개체가 상당히 커질 가능성이 있다.
위의 문제를 해결하기 위해 Vuex를 사용하면 저장소를 모듈로 분할할 수 있다. 각 모듈에는 고유한 상태, 변형, 작업 및 getter가 있다.
네임스페이스 기본적으로 모듈 내의 작업, 변형 및 getter는 전역 네임스페이스에 등록된다. 이를 통해 여러 모듈이 동일한 변형 또는 작업에 응답할 수 있다.
모듈이 더 높은 수준의 캡슐화 및 재사용성을 갖기를 원하는 경우, 네임스페이스 모듈을 추가하여 네임스페이스 모듈로 만들 수 있다. 모듈이 등록되면 모듈의 모든 getter, 작업 및 변형 이름이 모듈의 등록된 경로에 따라 자동으로 지정된다.
2. vuex 다운로드
일단 vuex를 설치한다.
npm i vuex yarn add vuex // yarn
3. store.js 수정
기본적으로 전역인 store.js만 있는데 아래처럼 모듈폴더를 추가하고 각 모듈별 저장할 store 파일들을 만든다.
- src 폴더에 store 폴더 추가
- store.js를 store 폴더에 넣고 store.js의 이름을 index.js로 바꿉니다.
- 모듈 js를 저장하려면 store 폴더에 모듈 폴더를 추가한다…
- type.js 에서 상수를 정의하고 , 상수를 사용하여 mutation을 대체한다. 이벤트 유형 member.js 에서 사용자 구성 요소 에 사용되는 ,
state를 작성 하고 마지막으로 균일하게 내보낸다(이전 예의 store.js 와 유사) . getters.js 에서는 프로세스 판단 및 비동기 요청과 같이 실행될 작업인 actions.js 에 작성된 원래 속성을 가져오는 데 사용 된다 .
4. main.js 에 index.js(스토어) 등록수정
코드 복사
import Vue from 'vue'
import App from './App.vue'
import store from './store/index.js'
new Vue({
store,
el: '#app',
render: h => h(App)
})
5.types.js에서 상수를 정의하고 내보낸다. 기본적으로 모두 대문자이다.
const INCREMENT = 'INCREMENT'
const DECREMENT = 'DECREMENT'
export default {
INCREMENT,
DECREMENT
}
참고 : 이러한 상수를 별도의 파일에 넣으면 코드 공동 작업자가 전체 앱에 포함된 변형을 한눈에 볼 수 있다. 상수를 사용할지 여부는 사용자에게 달려 있다. 이는 여러 사람이 함께 작업하는 대규모 프로젝트에 도움이 될 수 있다.
6. member.js의 사용자 구성 요소에 사용되는 상태, getter, 작업 및 변형을 작성한다.
import types from "./../types";
// state로 관리
const state ={
count:5
}
// getters
var getters ={
count(state){
return state.count
}
}
// actions : store에 가해질 액션을 정의,commit 을 통해서 액션을 받는다. commit(types.INCREMENT)
const actions ={
increment({ commit, state }){
commit(types.INCREMENT)
},
decrement({commit,state}){
if (state.count>10) {
commit(types.DECREMENT)
}
}
}
const mutations ={
// 액션을 통해 commit(types.INCREMENT) 가 발동할때 실행. 단 상수를 안쓴다면 보통 이렇게 호출한다. increment(state)
[types.INCREMENT](state){
state.count++
},
[types.DECREMENT](state){
state.count--
}
}
// 외부에서 사용할수 있도록 내보내자.
export default {
namespaced: true, // 네임스페이스 설정 추가해서 상태,게터,액션,뮤테이션이 모듈 내부에서만 접근하도록 하자.
state,
getters,
actions,
mutations
}
7. 추가로 모듈의 값을 이용하여 전역 getters.js에 홀수와 짝수를 결정하는 기능을 작성한다.
import members from './modules/member'
const getters = {
isEvenOrOdd(state){
return members.state.count % 2 == 0 ? "짝수" : "홀수"
}
}
export default getters;
8. index.js에 actions.js, getters.js, user.js를 모아서 균일하게 내보낸다.
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import getters from './getters'
import actions from './actions'
import members from './modules/member'
export default new Vuex.Store({
getters,
actions,
modules:{
members
}
})
9. AppMain.vue 파일을 수정.
코드 복사
<template>
<div id="app">
<button @click="increment">증가</button>
<button @click="decrement">감소</button>
<p>{{count}}</p>
<p>{{isEvenOrOdd}}</p>
</div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
computed:mapGetters([
'count',
'isEvenOrOdd'
]),
methods:mapActions([
'increment',
'decrement'
])
}
</script>
0 comments:
댓글 쓰기