vuex modules 모듈

1.modules의state

export default () => {
  return new Vuex.Store({
    modules: {
      a: {
        state: {
          text: 1
        }
      },
      b: {
        state: {
          text: 2
        }
      }
    }
  })
}

computed: {
    textA () {
      return this.$store.state.a.text // 1
    }
  }

혹은

...mapState({
  textA: (state) => state.a.text
})

2.modules의mutation
mapMutations에서 modules의 mutation을 직접 사용할 수 있습니다

modules: {
  a: {
    state: {
      text: 1
    },
    mutations: {
      updateText (state, text) {
        console.log('a.state', state)
        state.text = text
      }
    }
  }
}

mounted () {
  this.updateText('123')
},
methods: {
  ...mapMutations(['updateText'])
}

3. modules의mutation에 명칭 공간을 추가

modules: {
  a: {
    namespaced: true,
    state: {
      text: 1
    },
    mutations: {
      updateText (state, text) {
        console.log('a.state', state)
        state.text = text
      }
    }
  }
}

이름 공간이 있을 때 호출 방식

mounted () {
  this['a/updateText']('123')
},
methods: {
  ...mapMutations(['a/updateText'])
}

4.modules의 Getter

modules: {
  a: {
    namespaced: true,
    state: {
      text: 1
    },
    getters: {
      textPlus (state) {
        return state.text + 1
      }
    }
  }
}

computed: {
  ...mapGetters({
    textPlus: 'a/textPlus'
  })
}

5.modules의 Getter를 위한 전역state 호출

getters: {
  textPlus (state, getters, rootState) {
    return state.text + rootState.count
  }
}

Getter는 다른 모듈의state를 호출합니다

getters: {
  textPlus (state, getters, rootState) {
    return state.text + rootState.b.text
  }
}

6.modules의 action 전역의mutation 수정

actions: {
  add ({state, commit, rootState}) {
    commit('updateCount', rootState.count)
  }
}

이 때, 컨트롤러가 오류 [vuex] unknown local mutation type: updateCount, global type: a/updateCount 를 보고할 때, 모듈이 전역적인mutation을 호출할 수 있도록 허용해야 합니다.

 add ({state, commit, rootState}) {
    commit('updateCount', {num: 999}, {root: true})
  }

7.modules b의 action은 modules a의mutation을 호출합니다

modules: {
  a: {
    namespaced: true,
    state: {
      text: 1
    },
    mutations: {
      updateText (state, text) {
        console.log('a.state', state)
        state.text = text
      }
    }
  },
  b: {
    actions: {
      testAction ({commit}) {
        commit('a/updateText', 'test text')
      }
    }
  }
}

mounted () {
  this.testAction()
},
methods: {
  ...mapActions(['testAction'])
}

modules b에 이름 공간을 추가합니다

b: {
  namespaced: true,
  state: {
    text: 2
  },
  actions: {
    testAction ({commit}) {
      commit('a/updateText', 'test text', {root: true})
    }
  }
}

이 때 호출도 명칭 공간을 추가해야 합니다

mounted () {
  this['b/testAction']()
},
methods: {
  ...mapActions(['b/testAction'])
}

module에서도 모듈을 끼워넣을 수 있습니다
동적 로드 모듈

// main.js
store.registerModule('c', {
  state: {
    text: 3
  }
})

vuex에 업데이트 기능 추가

export default () => {
  const store = new Vuex.Store({
    strict: isDev,
    state: defaultState,
    mutations,
    getters,
    actions
  })
  if (module.hot) {
    module.hot.accept([
      './state/state',
      './mutations/mutations',
      './getters/getters',
      './action/action'
    ], () => {
      const newState = require('./state/state').default
      const newMutations = require('./mutations/mutations').default
      const newGetters = require('./getters/getters').default
      const newActions = require('./action/action').default

      store.hotUpdate({
        state: newState,
        mutations: newMutations,
        getters: newGetters,
        actions: newActions
      })
    })
  }
  return store
}