如何在单独的非Vue组件JavaScript/TypeScript文件中访问Vuex状态

Question

我们想做的事情是让尽可能多的业务逻辑远离UI逻辑。尤其比如设置一个服务类型的Typescript类，该类可以与一些节点模块API交互并更新Vuex中的应用程序状态。而不是让Vue组件直接担心这种业务逻辑。

有没有一种方法可以在一个单独的.ts/.js文件中使用这个Vuex类库装饰器与Vuex交互？比如创建一些ES类，并在其中有一个存储、getter、突变等来与我的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进行所有交互。

Answer 1

我能够通过使用这个库来实现这一点，https://github.com/gertqin/vuex-class-modules

自述很好地描述了它。。。

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

然后将Vuex模块突变等与userModule.someMutation()一起使用