Vuex 사용 시 vuex-module-decortors 를 사용하여 보완

개시하다
엔지니어로서 일을 시작한 지 4개월이 지났습니다. 5개월째에 접어들었습니다. 저는 자신의 기술 수준에 대해 절망을 느끼고 매일 노력하고 있습니다!
제가 예전에 신경을 많이 썼던 Vuex+Type script 환경에서 지식인들이 작용하기 어려운 문제.
해결할 수 있는vuex-module-decorators을 사용했기 때문에 메모로 남겼습니다.
install

yarn add -D vuex-module-decorators

npm install -D vuex-module-decorators 

Setup~/utils/store-accessors.ts에서 설치 모듈을 가져와store에 로그인합니다.
또 새로운 스토어가 완성되면 이 파일에 추가됩니다.

// ~/utils/store-accessors.ts
import { Store } from "vuex";
import { getModule } from "vuex-module-decorators";
import User from "~/store/users";

// 新しいstoreが出来次第以下に追加していく
let usersStore: User;
// let exampleStore: Example

function initialiseStores(store: Store<any>): void {
  usersStore = getModule(User, store);
}

export {
  initialiseStores,
  usersStore,
};

~/store/index.ts 구성 요소에서 store-accessor.ts의store를 가져오기 위해 export를 진행합니다.
또한store가 초기화되고 있습니다.

// ~/store/index.ts
import { Store } from 'vuex'
import { initialiseStores } from '~/utils/store-accessor'
const initializer = (store: Store<any>) => initialiseStores(store) //storeの初期化
export const plugins = [initializer]
export * from '~/utils/store-accessor' //storeをexportする

스토어 제작
이것은 스토어의 전체적인 인상이다.
뮤테이션과 액션 등은 기본적으로 장식물로 제작된다.
Getter와state는 장식물을 사용하지 않는 것이 수수께끼입니다.
그런 일은 차치하고 다음 순서대로 설명하겠습니다.

// ~/store/users.ts
import { Module, VuexModule, Mutation, Action } from "vuex-module-decorators";
import { $axios } from "~/plugins/api";

export type UserType = {
  name: string;
  age: number;
};

@Module({
  name: "users",
  stateFactory: true,
  namespaced: true,
})
export default class User extends VuexModule {
  private users: UserType[] = [];

  public get getUsers() {
    return this.users;
  }

  @Mutation
  public addUsers(user: UserType) {
    return this.users.push(user);
  }

  @Mutation 
  public setUsers(users: UserType[]) {
    return this.users = users;
  }

  @Action
  public async fetchUsersData() {
    const { data } = await $axios.get<UserType[]>("/api/users/");
    this.setUsers(data);
  }
}

해설
필요한 모듈 가져오기$axiosapi를 두드릴 때 사용하기 때문에 가져오는 중입니다.

import { Module, VuexModule, Mutation, Action } from "vuex-module-decorators";
import { $axios } from "~/plugins/api";

유형 정의
여기는store 파일에 직접 기술하지만, types 폴더로 나누면 더 예쁠 수 있습니다.

export type UserType = {
  name: string;
  age: number;
};

Module 정의

name에 경로를 지정합니다.

Action Nuxt는 모듈 모드로 Store를 제작합니다.

namespced: 진짜로서 명칭 공간

적용

@Module({
  name: "users",
  stateFactory: true,
  namespaced: true,
})

state 제작
state는 기본적으로 클래스에서만 접근하기 때문에 privete로 정의합니다.

private users: UserType[] = [];

getter
users 값의 Getter를 되돌려줍니다.
클래스 내에서는state에 접근할 수 있습니다.

  public get getUsers() {
    return this.users;
  }

Mutation
이것은 users 데이터를 설정하는 Mutation입니다.
여기서 privete는 Action에서만 Mutation을 실행하도록 정의합니다.
기본적으로 Mutation은 prive로 정의하는 것이 좋을 것 같습니다.

 @Mutation 
  private setUsers(users: UserType[]) {
    return this.users = users;
  }

Action
다음 비동기식 작업을 수행할 때 Aciton을 사용합니다.
획득한 사용자 데이터는 방금 Mutation에서 정의한 setUsers 함수의 매개 변수에 전달됩니다.

 @Action
  public async fetchUsersData() {
    const { data } = await $axios.get<UserType[]>("/api/users/");
    this.setUsers(data);
  }

어셈블리 내에서 작업 수행하기

import { usersStore } from "@/store";

const store = usersStore;
store.fetchUsersData(); //Actionを実行。

이렇게 하면 어셈블리 내에서 Action을 실행할 수 있습니다.
보충도 효과가 있어요. 최고예요.

끝말
예전부터 vuex를 사용했을 때 보완이 안 돼서 귀찮았어요.
앞으로도 Vuex를 사용할 때 이걸로 할게요.
아마도 commiit와 디스패치와 작별인사를 했을 거예요.