Vuex-module-decorator

Install

npm install vuex-module-decorators
# or
yarn add vuex-module0decorators

이 부분은 Optional

1. ES5 Transpilation

   // vue.config.js
   module.exports = {
     ...
     transpileDependencies: [
       'vuex-module-decorators'
     ]
   }
   

2. Transpiler Configurations
   • Babel
   • install babel-plugin-transform-decorators
   • Typescript
   • experimentalDecorators: true
   • Tip) 데코레이터로 코드를 줄이려면 emitHelpers: true, importHelpers: true

Getting Started

1. module 정의
   

   import { Module, VuexModule } from  'vuex-module-decorators'
   
   @Module
   export default class MyModule extends VueModule {
   someField: string = 'somedata'
   }
   

2. store 사용
   

   import Vuex from 'vuex'
   import MyModule from '~/store/mymodule'
   
   const store = new Vuex.Store({
     modules: {
       myMod:  MyModule
     }
   })
   

3. state 접근
   
   1. store 가져오기
      

      import store from '~/store'
      store.state.myMod.someField
      

   2. 컴포넌트에서 this.$store사용하기
      

      this.$store.state.myMod.someField
      

   3. getModule() 사용하기
      

      import { Module, VuexModule, getModule } from 'vuex-module-decorators'
      import store from  '@/store'
      
      @Module({ dynamic: true, store, name: 'mymod' })
      class MyModule extends VuexModule {
        someField: number = 10
      }
      
      const myMod = getModule(MyModule)
      myMod.someField  //works
      myMod.someOtherField  //Typescript will error, as field doesn't exist
      

State

import { Module, VuexModule } from 'vuex-module-decorators'

@Module
export default class Vehicle  extends VuexModule {
  wheels = 2
}

위의 코드는 아래의 코드로 변환된다.

export  default {
  state: {
    wheels:  2
  }
}

Getters

ES6 getter 함수는 vuex getter로 변환된다.

import { Module, VuexModule } from 'vuex-module-decorators'

@Module
export default class Vehicle  extends VuexModule {
  wheels = 2
  get  axles() {
    return  wheels / 2
  }
}

위의 코드는 아래의 코드로 변환된다.

export  default {
  state: {
    wheels: 2
  },
  getters: {
    axles: (state) => state.wheels / 2
  }
}

Mudations

import { Module, VuexModule, Mutation } from 'vuex-module-decorators'

@Module
export default class Vehicle  extends VuexModule {
  wheels = 2
  
  @Mutation
  puncture(n: number) {
    this.wheels = this.wheels - n
  }
}

위의 코드는 아래의 코드로 변환된다.

export default {
  state: {
    wheels:  2
},
  mutations: {
    puncture: (state, payload) => {
      state.wheels = state.wheels - payload
    }
  }
}

Actions

import { Module, VuexModule, Mutation } from  'vuex-module-decorators'
import { get } from  'request'

@Module
export default class Vehicle extends  VuexModule {
  wheels = 2

  @Mutation
  addWheel(n: number) {
    this.wheels = this.wheels + n
  }

  @Action
  async fetchNewWheels(wheelStore: string) {
  const wheels = await get(wheelStore)
  this.context.commit('addWheel', wheels)
  }
}

위의 코드는 아래의 코드로 변환된다.

const request = require('request')
export default {
  state: {
    wheels:  2
  },
  mutations: {
    addWheel: (state, payload) => {
      state.wheels = state.wheels + payload
    }
  },
  actions: {
    fetchNewWheels: async (context, payload) => {
      const  wheels = await request.get(payload)
      context.commit('addWheel', wheels)
    }
  }
}

마무리

typescript + vuex를 공부하면서 작성한 예제는 여기에 올려 놓았다.

참고

• vuex-module-decorators
• github-vuex-module-decorators