Vuex4 (4) modules + typeScript
vuex4.xx 버전 저장소들을 모듈화시킬때 타입스크립트를 적용하는 방법 정리
해당 연습 깃허브 커밋
폴더 구조
공통
store/board/board.type.ts
export interface boardType {
boardData: boardDesc[];
}
export interface boardDesc {
index: number;
tit: string;
desc: string;
}
store/autho/autho.type.ts
export interface userInfoType {
index: number;
userName: string;
userId: string;
}
store/index.ts
모듈을 import 하고 rootState 를 선언해줘야한다.
import { createStore } from "vuex";
import { userInfoType } from "./autho/autho.type"
import { boardType } from './board/board.type';
import { ModuleUserInfo } from './autho'
import { ModuleBoard } from './board/index'
export interface RootState {
ModuleUserInfo: userInfoType;
ModuleBoard: boardType;
}
export default createStore({
modules: {
ModuleUserInfo, ModuleBoard
},
});
구성요소 분리 X
기존에 js 스타일과 큰 차이는 없다 타입스크립트의 타입 정의하는 문법과 vuex 의 module 이라는 내장함수에 맞게 형식 변환하고 localState, rootState 를 선언하는 것이 필요함
import { Module } from "vuex";
import { RootState } from "../index";
import { boardType, boardDesc } from './board.type'
export const ModuleBoard: Module<boardType, RootState> = {
state: {
boardData: [
{
tit: 'title',
desc: 'board desc'
}
]
},
mutations: {
BOARD_UPDATE(state: boardType, payload: boardDesc) {
state.boardData.push(payload)
}
},
actions: {
boardUpdate({ state, commit, rootState }, payload) {
console.log(state, rootState)
commit('BOARD_UPDATE', payload)
}
},
getters: {
boardList: (state, rootGetter, rootState) => {
console.log(rootGetter)
console.log(rootState)
return state.boardData
}
}
}
구성요소 분리 O
프로젝트가 커질수록 구성요소가 많아지는 경우가 있다. 각 구성요소별로 관리하기 쉽게 나눠줄 수 있다.
store/autho/index.ts
각 구성요소를 import 하는 것 외엔 구성요소가 분리 되지 않는 작성법과 동일하다
import { Module } from "vuex";
import { state } from "./state";
import { mutations } from "./mutation";
import { actions } from "./actions";
import { getters } from "./getters";
import { userInfoType } from "./autho.type"
import { RootState } from "../index";
export const ModuleUserInfo: Module<userInfoType, RootState> = {
state,
getters,
actions,
mutations
};
store/autho/state.ts
type 파일 import 하는 것은 생략해도 index.ts 에서 선언 되어 있어서 누락되거나 잘못될경우 에러메세지를 낸다.
import { userInfoType } from "./autho.type"
export const state = {
index: 1,
userName: "",
userId: "userID",
} as userInfoType;
store/autho/getters.ts
getters 를 사용하기 위한 타입을 선언해주고 내장 함수 GetterTree를 사용 타입을 지정해준다. *GetterTree 함수에 대한 공식 문서를 찾지 못함...
import { GetterTree } from "vuex";
import { RootState } from "@/store";
import { userInfoType } from "./autho.type";
export type Getters = {
userIdGetters(state: userInfoType, getters: RootState, rootState: RootState): string;
};
export const getters: GetterTree<userInfoType, RootState> & Getters = {
userIdGetters: (state: userInfoType, getters: RootState, rootState: RootState) => {
console.log('login_getter', getters, rootState)
return state.userId
},
};
store/autho/mutation.type.ts
mutation 과 actions는 아래처럼 각 타입을 선언한다.
GetterTree 와 유사하게 MutationTree를 사용한다.
export enum MutationType {
LOGIN = "LOGIN"
}
store/autho/mutation.ts
import { MutationTree } from "vuex";
import { userInfoType } from "./autho.type";
import { MutationType } from "./mutation.type";
export type Mutations<S = userInfoType> = {
[MutationType.LOGIN](state: S, payload: userInfoType): void;
};
export const mutations: MutationTree<userInfoType> & Mutations = {
[MutationType.LOGIN](state: userInfoType, payload: userInfoType) {
state.userId = payload.userId
state.userName = payload.userName
},
};
store/autho/action.type.ts
action 에선 mutations 를 호출해서 사용해야하기 때문에 mutation.type 과 mutation 도 import 해야한다.
AugmentedActionContext 은 context 에 대한 타입을 선언해주는 부분.
export enum ActionType {
login = "login",
}
store/autho/action.ts
import { ActionTree, ActionContext } from "vuex";
import { RootState } from "@/store";
import { Mutations } from "./mutation";
import { MutationType } from "./mutation.type";
import { userInfoType } from "./autho.type";
import { ActionType } from "./actions.type";
type AugmentedActionContext = {
commit<K extends keyof Mutations>(
key: K,
payload: Parameters<Mutations[K]>[1]
): ReturnType<Mutations[K]>;
} & Omit<ActionContext<userInfoType, RootState>, "commit">;
export interface Actions {
[ActionType.login](
{ commit }: AugmentedActionContext,
payload: userInfoType
): void;
}
export const actions: ActionTree<userInfoType, RootState> & Actions = {
[ActionType.login]({ commit, state, rootState }, payload) {
console.log('login_action', state, rootState);
commit(MutationType.LOGIN, payload);
},
};
Author And Source
이 문제에 관하여(Vuex4 (4) modules + typeScript), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hec8897/Vuex4-4-modules-typeScript저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)