Incrementing values with Vuex Module Decorators and TS

Question

I'm having a big issue when it comes to incrementing data.

@Module
class Mod extends VuexModule {
   public value = 2; // this is only accessible within a MutationAction when using this.state.value, but has a lot of type errors.

   @MutationAction({ mutate: ["value"] })
   async valueIncrement(): Promise<Record<"value", number>> {
      const req: AxiosRequest = await axios.get("...randomValue/");

      return {
         value: this.value += req.data // this doesn't work because this.value is undefined
      }
   }
}

It seems MutationAction doesn't have access to the module state?

Another solution that I found, which looks like a workaround, is to set (this.state as this).value.

Is there some way to access the state directly from a MutationAction, some extra configuration maybe?

Answer 1

as per MutationActions source code , the function is called with store's context as 'this' , so i believe you will find value at this.state.value