1 개요[ | ]
- Vuex plugins
- Vuex 플러그인
- Vuex 저장소는 각 변이에 대한 훅을 노출하는 plugins 옵션을 허용한다.
- Vuex 플러그인은 저장소를 유일한 전달인자로 받는 함수이다.
JavaScript
Copy
const myPlugin = store => {
// 저장소가 초기화될 때 호출된다.
store.subscribe((mutation, state) => {
// 매 변이시마다 호출된다.
// 변이는 { type, payload } 형식으로 들어온다.
})
}
그리고 다음과 같이 사용할 수 있다.
JavaScript
Copy
const store = new Vuex.Store({
// ...
plugins: [myPlugin]
})
2 플러그인 내부에서 변이 커밋하기[ | ]
- 플러그인은 상태를 직접 변이할 수 없고, 컴포넌트와 유사하게 변이를 커밋하여 변경을 트리거할 수 있다.
- 변이를 커밋함으로써 플러그인을 사용하여 데이터 소스를 저장소에 동기화할 수 있다.
- 예를 들어, websocket 데이터 소스를 저장소에 동기화하기 위해 다음과 같이 할 수 있다.
- ( 이것은 다소 인위적인 예제이며, 실상황의 더 복잡한 작업을 위해서는
createWebSocketPlugin
함수에 추가적인 옵션을 필요할 것이다. )
JavaScript
Copy
export default function createWebSocketPlugin (socket) {
return store => {
socket.on('data', data => {
store.commit('receiveData', data)
})
store.subscribe(mutation => {
if (mutation.type === 'UPDATE_DATA') {
socket.emit('update', mutation.payload)
}
})
}
}
JavaScript
Copy
const plugin = createWebSocketPlugin(socket)
const store = new Vuex.Store({
state,
mutations,
plugins: [plugin]
})
3 상태 스냅샷 찍기[ | ]
- 때로는 플러그인이 상태의 "스냅샷"을 받으려고 할 수 있는데, 변이-후 상태를 변이-전 상태와 비교할 수 있다.
- 이를 달성하기 위해서는 상태 객체에 대해 깊은 복사를 수행해야 한다.
JavaScript
Copy
const myPluginWithSnapshot = store => {
let prevState = _.cloneDeep(store.state)
store.subscribe((mutation, state) => {
let nextState = _.cloneDeep(state)
// prevState와 nextState를 비교...
// 다음 변이를 위해 상태 저장
prevState = nextState
})
}
- 상태 스냅샷을 찍는 플러그인은 개발 중에만 사용해야 한다. ★
- webpack 또는 Browserify를 사용하는 경우, 빌드 도구가 이를 처리하게 할 수 있다.
JavaScript
Copy
const store = new Vuex.Store({
// ...
plugins: process.env.NODE_ENV !== 'production'
? [myPluginWithSnapshot]
: []
})
- 기본적으로는 플러그인이 사용될 것이다.
- 그러나 production용으로는, 최종 빌드시
process.env.NODE_ENV !== 'production'
의 값을false
로 바꿔주는 webpack용 DefinePlugin이나 Browserify용 envify가 필요할 것이다.
4 빌트인 로거 플러그인[ | ]
참고:vue-devtools를 사용하고 있다면, 아마 이것이 필요하지 않을 것이다.
- Vuex에는 일반 디버깅을 위한 로거 플러그인이 들어 있다.
JavaScript
Copy
import { createLogger } from 'vuex'
const store = new Vuex.Store({
plugins: [createLogger()]
})
경고:v3.5.0 미만 버전에서는,
createLogger
함수가vuex/dist/logger
패키지에서 export된다. 이 페이지의 "Vuex v3.5.0 미만 버전" 섹션을 참고하자.
createLogger
함수는 몇 가지 옵션을 가진다.
JavaScript
Copy
const logger = createLogger({
collapsed: false, // 로그를 가지는 변이 자동-확장
filter (mutation, stateBefore, stateAfter) {
// 변이시 로깅해야 한다면 true를 반환하자.
// mutation(변이)는 { type, payload } 형식이다.
return mutation.type !== "aBlocklistedMutation"
},
actionFilter (action, state) {
// 필터(filter)와 유사하며, 액션(action)과는 다르다
// action(액션)은 { type, payload } 형식이다.
return action.type !== "aBlocklistedAction"
},
transformer (state) {
// 로깅하기 전 상태를 변형시키자.
// 예를 들어, 특정 하위-트리만을 반환해본다.
return state.subTree
},
mutationTransformer (mutation) {
// mutation(변이)는 { type, payload } 형식으로 로깅된다.
// 원하는 다른 형식을 지정할 수 있다.
return mutation.type
},
logActions: true, // 액션 로깅
logMutations: true, // 변이 로깅
logger: console, // `console` API의 구현체, 기본값은 `console`
})
- 로거 파일은
<script>
태그를 통해 직접 포함(include)될 수 있고,createVuexLogger
함수를 전역적으로 노출할 것이다. - 로거 플러그인은 상태 스냅샷을 찍는다는 점을 기억하고, 개발중에만 사용하자.
4.1 Vuex v3.5.0 미만 버전[ | ]
v3.5.0 미만 버전에서는, createLogger
함수가 vuex/dist/logger
패키지에서 export된다.
JavaScript
Copy
import createLogger from 'vuex/dist/logger'
const store = new Vuex.Store({
plugins: [createLogger()]
})
5 참고[ | ]
편집자 Jmnote Jmnote bot
로그인하시면 댓글을 쓸 수 있습니다.