티스토리 뷰
Vuex store는 변이에 대한 훅을 노출하는 plugins
옵션을 제공합니다. 플러그인은 store를 유일한 전달인자로 받는 함수입니다.
const myPlugin = store => {
// 저장소가 초기화 될 때 불립니다.
store.subscribe((mutation, state) => {
// 매 변이시마다 불립니다.
// 변이는 { type, payload } 포맷으로 제공됩니다.
})
}
const store = new Vuex.Store({
// ...
plugins: [myPlugin]
})
1. 플러그인 내부에서 변이 커밋하기
변이를 커밋한다는 말은 commit
메소드를 사용하여 mutations
의 핸들러를 호출한다는 말로 사용할 것입니다. 플러그인은 state를 직접 변경 할 수 없습니다. 컴포넌트와 마찬가지로 변이를 커밋하여 핸들러를 호출해야 합니다.
플러그인에서 변이를 커밋하여 데이터를 store에 동기화 할 수 있습니다. 예를 들어,
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)
}
})
}
}
const plugin = createWebSocketPlugin(socket)
const store = new Vuex.Store({
state,
mutations,
plugins: [plugin]
})
위의 코드와 같이 websocket를 사용하여 플러그인이 있다면, socket이 data를 전송 받게 되면 커밋하여 store를 동기화 하고, 변이가 커밋 된다면, socket.emit('update', mutation.payload)
를 사용하여 socket에 변경된 데이터를 전송 할 수 있습니다.
2. state 스냅샷 가져오기
변이 이전의 state와 변이 이후의 state를 비교해야 할 필요가 있을 수 있습니다. 그러기 위하여, 플러그인의 상태의 스냅샷을 얻어야 합니다. 여기서 스냅샷이란, state가 변경되기 전의 값을 저장하는 객체를 이야기 합니다. 스냅샷을 만들기 위해서는 깊은 복사를 수행해야 합니다.
const myPluginWithSnapshot = store => {
let prevState = _.cloneDeep(store.state)
store.subscribe((mutation, state) => {
let nextState = _.cloneDeep(state)
// prevState와 nextState를 비교하십시오.
// 다음 변이를 위한 상태 저장
prevState = nextState
})
}
state 스탭샷을 사용하는 플러그인은 개발 모드에서만 사용해야 합니다.
const store = new Vuex.Store({
// ...
plugins: process.env.NODE_ENV !== 'production'
? [myPluginWithSnapshot]
: []
})
webpack 또는 Browserify를 사용하는 경우 위의 코드와 같이 작성 할 수 있습니다.
3. 내장 Logger 플러그인
vue-devtools를 사용하면 필요 없을 수 있습니다.
Vuex는 디버깅을 위한 Logger 플로그인을 제공합니다.
import createLogger from 'vuex/dist/logger'
const store = new Vuex.Store({
plugins: [createLogger()]
})
createLogger
함수는 몇가지 옵션을 가집니다.
const logger = createLogger({
collapsed: false, // 로그를 가지는 변이 자동 확장
filter (mutation, stateBefore, stateAfter) {
// 변이시 항상 로깅해야 한다면 true 를 반환하십시오.
// 변이는 { type, payload }의 포맷입니다.
return mutation.type !== "aBlacklistedMutation"
},
transformer (state) {
// 로깅하기전 상태를 변이 하십시오.
// 예를 들어 특정 하위 트리만 반환합니다.
return state.subTree
},
mutationTransformer (mutation) {
// 변이는 { type, payload }의 포맷으로 기록됩니다.
// 원하는 포맷으로 변경할 수 있습니다.
return mutation.type
},
logger: console, // `console` API의 구현체, default `console`
})
Logger 파일은 <script>
태그를 통해 직접 포함 할 수 있습니다. 태그를 통해 직접 포함하였다면, createVuexLogger
함수가 전역으로 노출됩니다. Logger 플로그인은 개발용으로만 사용되어야 합니다.
참고
'Vue.JS' 카테고리의 다른 글
[vuex] Testing (0) | 2019.07.19 |
---|---|
[vuex] Strict Mode와 Form Handling (0) | 2019.07.16 |
[vuex] Modules (0) | 2019.07.16 |
[vuex] Actions (2) | 2019.07.11 |
[vuex] Mutations (0) | 2019.07.10 |