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

Posted 2023-02-22

【中文标题】如何在单独的非 Vue 组件、JavaScript/TypeScript 文件中访问 Vuex 状态？

【英文标题】：How to access Vuex state in a seperate non-Vue component, JavaScript/TypeScript file?

【发布时间】：2021-03-16 00:45:14

【问题描述】：

我们想做的事情是让尽可能多的业务逻辑远离 UI 逻辑。特别是......喜欢设置一个服务类型的 Typescript 类，它可以与一些 Node Module API 交互并更新 Vuex 中的应用程序状态。 而不是让 Vue 组件直接担心这个业务逻辑。

有没有一种方法可以在单独的 .ts/.js 文件中使用这个 vuex 类库装饰器与 Vuex 交互？那么就像创建一些 ES 类，并在其中包含一个 store、getter、mutations 等来与我的 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 进行所有交互。

【参考方案1】：

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

README 很好地描述了它...

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

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