별도의 비 Vue 컴포넌트인 JavaScript/TypeScript 파일에서 Vuex 상태에 액세스하는 방법

별도의 비 Vue 컴포넌트인 JavaScript/TypeScript 파일에서 Vuex 상태에 액세스하는 방법

UI 로직에서 비즈니스 로직을 최대한 멀리하고 싶습니다.특히...일부 노드 모듈 API와 상호 작용하여 Vuex에서 애플리케이션 상태를 업데이트할 수 있는 서비스 유형 스크립트 클래스를 설정하는 것을 좋아합니다.Vue 컴포넌트가 이 비즈니스 논리에 대해 직접 고민하는 것이 아니라

별도의 .ts/.js 파일로 이 vuex 클래스의 라이브러리 데코레이터를 사용하여 Vuex와 대화할 수 있는 방법이 있습니까?예를 들어 ES 클래스를 만들고 Vuex 상태와 상호 작용하기 위해 스토어, 게터, 돌연변이 등을 포함하는 경우?

//fooService.ts  .......or something like that
import ...

export default class FooService {
  @FooModule.State
  private FooModel!: FooModel;

  @FooModule.Getter
  private foo!: Foo;

  @FooModule.Mutation
  private setFoo!: (newFoo: Foo) => void;

  private doFooBusinessLogic(){ ... }

}

그리고 Vue 컴포넌트에서는 이 클래스를 초기화하고 Vuex 데이터와 상호 작용하도록 호출합니다.

Vue 컴포넌트 내에서 Vuex와 모든 상호작용을 수행할 필요가 없습니다.

대신 이 라이브러리 https://github.com/gertqin/vuex-class-modules를 사용하여 이 작업을 수행할 수 있었습니다.

README은 그것을 잘 설명하고 있습니다.

import { userModule } from "path/to/user-module.ts";

그리고 Vuex 모듈 돌연변이 등을 사용하여userModule.someMutation()

언급URL : https://stackoverflow.com/questions/65135511/how-to-access-vuex-state-in-a-seperate-non-vue-component-javascript-typescript