vuex + typescript 사용 하기

vuex + typescript 사용 하기

---

vuex 를 typescript 로 사용하기 위한 라이브러리는 

https://github.com/championswimmer/vuex-module-decorators

championswimmer/vuex-module-decorators

위에 오픈 소스 프로 젝트를 사용 하였습니다. 

 

 vuex-module-decorators

 

설치는 간단히 

npm install -D vuex-module-decorators

로 하면 됩니다. 

 

자료로 작성하는 이유는 github 소개에 나오는 사용법과 실제 사용법이 틀려서 삽질을 했기 때문입니다. 

 

정상적인 사용 방법은 

 

• https://github.com/Armour/vue-typescript-admin-template

Armour/vue-typescript-admin-template

을 참고 하였습니다. 

 

1) store 폴더 생성 및 index.ts 생성 

 

위와 같이 store 폴더를 만들고 index.ts 파일을 만들고 

store 폴더 밑에 modules 폴더를 만듭니다. 

 

index.ts

import Vue from 'vue';
import Vuex from 'vuex';


Vue.use(Vuex);
export interface IRootState {
 
}

export default new Vuex.Store<IRootState>({})

은 위와 같은 구조로 만듭니다. 

 

그리고 저는 Vuex 로사용할 파일을 modules 파일 밑에 globalstate.ts  파일을 생성 하였습니다.

 

globalstate.ts 

import Vue from 'vue';
import Vuex from 'vuex';
import { Module, VuexModule, Mutation,getModule } from 'vuex-module-decorators'
import store from '@/store'

export interface IGlobalState {
    app_toolbar_search_text :String 
}
  
@Module({
    store,
    name: "GlobalSatete",
    namespaced: true,
    dynamic: true
})
class GlobalSatete extends VuexModule implements IGlobalState{
app_toolbar_search_text :String = ''

  @Mutation
    set_app_toolbar_search_text(Value: String) {
    this.app_toolbar_search_text = Value;
  }
}
 export default getModule(GlobalSatete);

그리고 나서 다시 index.ts  파일로 돌아가서 

index.ts

import Vue from 'vue';
import Vuex from 'vuex';
import { IGlobalState } from './modules/globalstate'

Vue.use(Vuex);
export interface IRootState {
    globalstate: IGlobalState
}

export default new Vuex.Store<IRootState>({})

위와 같이 코드를 작성 합니다. 

 

이제 실제로 사용해 보겠습니다. 

 

저는 

에 

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import globalstate from "@/store/modules/globalstate";


@Component
export default class AppToolbar extends Vue {

    get toolbar_search_text(): String {
        return globalstate.app_toolbar_search_text;
    }
    set toolbar_search_text(value: String) {        
        globalstate.set_app_toolbar_search_text(value)
    }
}
</script>

 

위 코드와 같이 사용 할수 있습니다. 

 

다소 github readme 소개와는 다릅니다 .

github readme 대로 따라 할때에 에러가 뜹니다.