How to use MutationAction in vuex-module-decorators?

Question

I'm trying to use vuex-module-decorators from https://championswimmer.in/vuex-module-decorators. Let's say my module's state has a prop dir that's a dict: {[key: string]: string} Can I use @MutationAction to update an element of that dict? The code below isn't right but hopefully gets across what I mean.

export default class Module extends VuexModule {
  dir: {[key: string]: string}

  @MutationAction(???)
  updateDir(keyValue) {
    return keyValue // ???
  }
}

Is there some doc on how to use @MutationAction, what args it takes and what actual mutation it commits?

Answer 1

Here is what you should be doing -

export default class Module extends VuexModule {
  dir: {[key: string]: string}

  @MutationAction(['dir'])
  async updateDir(keyValue) {
    const currDir = this.dir

    // do any async work (network req) here
    currDir['myKey'] = keyValue

    return ( { dir: currDir } )
  }
}

But if you really did not need to any async work in the first place.

export default class Module extends VuexModule {
  dir: {[key: string]: string}

  @Mutation
  async updateDir(keyValue) {
    this.dir.myKey = keyValue
  }
}

P.S. I am the author of vuex-module-decorators