How to access Vuex store in a Typescript class that is not a component

Hi,

My Javascript fundamentals are a little shaky so this may be a “wrong question”. If there’s a better approach than this, I welcome advice.

I’m writing a Vue application using Class-based components. I’m taking this approach because I anticipate a lot of underlying code that doesn’t have a direct visual representation (i.e. no templates) and I’d like to write that in TypeScript.

I have a Vuex store that is working fine. Here is my main.ts file:

main.ts
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import vuetify from "@/plugins/vuetify";

Vue.config.productionTip = false;

new Vue({
   router,
   store,
   vuetify,
  render: h => h(App)
}).$mount("#app");

I’m able to access my store object in all my Vue components’ methods with this.$store.state.MyVariable. E.g.

One of my Vue components
<template>
  <div>
    {{ latestMessage }}
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component({
  components: { }
})
export default class MessageContainer extends Vue {
    @Prop() private id!: number;

    get latestMessage(): object {
     return this.$store.state.latestMessage;
  }

All good so far. (Note, I’ve simplified the above from the real application). Now here’s where I’m either doing something wrong or going down the wrong path.

A Rudimentary TypeScript Class
import store from "./../store";

export class MessageHolder {
  constructor(
    public id: number,
  ) {
   
  }
  internalId() {
    return this.id;
  }
  latestMessage() {
    return "Latest Message is: " + store.state.latestMessage;
  }
}

Now before answering, please note I’m not simply looking for ways to get the value from the store into the Vue component. I can do that. This is a simplified example. My problem is that I want to do all sorts of complex stuff to the values in the store in the classes I’m writing in Typescript.

Variations on the above throw errors that “store is not a constructor”. That makes sense. And even if it did work I think importing the class this way would probably (I’m guessing) return me a new instance of a store object that didn’t have the values set in my Vue components. But I’m not sure how to proceed.

Am I supposed to make any class that wants to access store extend vue? Should I instantiate any of my non-visual classes only from within VueComponents and pass in the store as a parameter? Can I simply decorate my class with { Vue } and have access? If I do some variation on that is it even possible to have a Vue component without a template / visual representation?

I’ve done a lot of searching but what little I found was too problem-specific for me or I found confusing because it wasn’t written for a Class-based components approach. So to sum up. I’m writing a Vue application. I’m writing a whole bunch of semi-parallel functionality in TypeScript classes. I want the latter to be able to access my Vuex store somehow.

All answers welcome - I’ve written a few Vue apps. This is my first experience with Typescript.