Vue Class based component 클래스 기반 컴포넌트에서 Vuex store 설정

class based component로 vue를 작성하던 중 vuex store를 이용하는 방법에 대해서 찾아보게 되었습니다.

클래스 기반 답게 변수 선언 후 호출하는 형태로 이용 가능합니다.

/**
 * 공통 스토어
 */
@Module({
    namespaced: true
})
export default class Common extends VuexModule {
    // 타이틀
    title = "";

    /**
     * 타이틀 조회
     * @return 타이틀
     */
    getTitle():string {
        return this.title;
    }

    /**
     * 타이틀 설정
     * @param title 타이틀
     */
    @Mutation
    public setTitle(title: string): void {
        this.title = title;
    }
}

위 컴포넌트에서 정의된 mutation을 사용하기 위해서는 namespace 키워드를 이용하면 됩니다.

import { namespace } from 'vuex-class';

const TestStore = namespace('Test');

...

// 앱 바 타이틀
@TestStore.Mutation
public setTitle!: (newTitle: string) => void;