How to access Vuex state in a seperate non-Vue component, JavaScript/TypeScript file?

Question

Something we would like to do is keep as much business logic away from UI logic. Particularly...like to setup a service type Typescript class that can interact with some Node Module API and update the apps state in Vuex. Rather than having Vue components directly worry about this business logic.

Is there a way I can interact with Vuex using this vuex-class library decorators in a separate just .ts/.js file? So like creating some ES class, and having a store, getter, mutations, etc in it to interact with my Vuex state?

//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(){ ... }

}

And then in the Vue component just initializing this class and calling it to interact with this Vuex data.

Rather than having to do ALL interactions with Vuex within a Vue component.

Carson Wood Carson Wood · Accepted Answer · 2020-12-04T19:24:47

I was able to accomplish this by using this library instead, https://github.com/gertqin/vuex-class-modules

The README describes it well...

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

And then you use the Vuex module mutations etc with userModule.someMutation()

How to access Vuex state in a seperate non-Vue component, JavaScript/TypeScript file?

1 Answers