[vuex] Plugins

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 플로그인은 개발용으로만 사용되어야 합니다.

참고

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