Vuex plugins

1 개요

Vuex plugins

Vuex 플러그인

• Vuex 저장소는 각 변이에 대한 훅을 노출하는 plugins 옵션을 허용한다.
• Vuex 플러그인은 저장소를 유일한 전달인자로 받는 함수이다.

const myPlugin = store => {
  // 저장소가 초기화될 때 호출된다.
  store.subscribe((mutation, state) => {
    // 매 변이시마다 호출된다.
    // 변이는 { type, payload } 형식으로 들어온다.
  })
}

그리고 다음과 같이 사용할 수 있다.

const store = new Vuex.Store({
  // ...
  plugins: [myPlugin]
})

2 플러그인 내부에서 변이 커밋하기

• 플러그인은 상태를 직접 변이할 수 없고, 컴포넌트와 유사하게 변이를 커밋하여 변경을 트리거할 수 있다.
• 변이를 커밋함으로써 플러그인을 사용하여 데이터 소스를 저장소에 동기화할 수 있다.
• 예를 들어, websocket 데이터 소스를 저장소에 동기화하기 위해 다음과 같이 할 수 있다.
• ( 이것은 다소 인위적인 예제이며, 실상황의 더 복잡한 작업을 위해서는 createWebSocketPlugin 함수에 추가적인 옵션을 필요할 것이다. )

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]
})

3 상태 스냅샷 찍기

• 때로는 플러그인이 상태의 "스냅샷"을 받으려고 할 수 있는데, 변이-후 상태를 변이-전 상태와 비교할 수 있다.
• 이를 달성하기 위해서는 상태 객체에 대해 깊은 복사를 수행해야 한다.

const myPluginWithSnapshot = store => {
  let prevState = _.cloneDeep(store.state)
  store.subscribe((mutation, state) => {
    let nextState = _.cloneDeep(state)

    // prevState와 nextState를 비교...

    // 다음 변이를 위해 상태 저장
    prevState = nextState
  })
}

• 상태 스냅샷을 찍는 플러그인은 개발 중에만 사용해야 한다. ★
• webpack 또는 Browserify를 사용하는 경우, 빌드 도구가 이를 처리하게 할 수 있다.

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에는 일반 디버깅을 위한 로거 플러그인이 들어 있다.

import { createLogger } from 'vuex'

const store = new Vuex.Store({
  plugins: [createLogger()]
})

경고:

v3.5.0 미만 버전에서는, createLogger 함수가 vuex/dist/logger 패키지에서 export된다. 이 페이지의 "Vuex v3.5.0 미만 버전" 섹션을 참고하자.

createLogger 함수는 몇 가지 옵션을 가진다.

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된다.

import createLogger from 'vuex/dist/logger'

const store = new Vuex.Store({
  plugins: [createLogger()]
})

5 참고

• https://vuex.vuejs.org/guide/plugins.html
• https://vuex.vuejs.org/kr/guide/plugins.html