[quest] mutation via setters about vuex-module-decorators

[Koc]

Is it possible get rid of strings when calling mutation inside action this.context.commit('addWheel', wheels) and call class method like this.mutations.addWheel(wheels)?

[talkid134]

Have you implemented this yet?

[championswimmer]

No, still figuring out what would be the best way to handle this.

[talkid134]

Just replace field with getter/setter on @mutable annotation(decorator)?

[talkid134]

For example

@Mutable 
data:any;

[championswimmer]

Hmmm that sounds pretty good!

[FlorianWendelborn]

@championswimmer it’d be less powerful than supporting something like this though:

class Example {
    set INITIALIZE({ id, firstName, lastName }: User) {
        this.id = id
        this.firstName = firstName
        this.lastName = lastName
    }
}

Another advantage would be that this is a lot closer to the normal vuex behavior.

[barakbd-bluevine]

Can you please give a full example of getter/setter with @mutable decoration?
Can it be used in current released?

[douglasg14b]

@Koc That would be great, right now refactoring large stores is more tedious than it needs to be with the strings....

[garyo]

I would love simple @Mutable like @talkid134 suggests. I have lots of simple data members in the state -- right now each one needs a mutation to set its value. (Well I suppose I could have one uber-mutation that took the string name of the prop to update... but that would be ugly.)

[pumpkinlink]

Is it possible get rid of strings when calling mutation inside action this.context.commit('addWheel', wheels) and call class method like this.mutations.addWheel(wheels)?

@Koc @douglasg14b I "get rid" of strings by adapting the Vuex mutation name convention

const rawError = true
const setPage = 'setPage'

@Module
export default class ActivitiesModule extends VuexModule {
  page: Page<OperationDTO> = {
    totalElements: 0,
    content: []
  }

  @Mutation [setPage] (value: ActivitiesModule['page']) { this.page = value }

  @Mutation cleanPage ()  { this.page = { totalElements: 0, content: [] }

  @Action({ rawError })
  async pullPage (/*...*/) {
      const response = await operationService
        .getByFinancialAccount_IdAndOccurrenceDateBetween(/*...*/)

      // use this:
      this.context.commit(setPage, response.data)
      // instead of this:
      this.context.commit('setPage', response.data)
  }
}

The mutation function will stop appearing in vscode's autocomplete when using getModule, because it's a computed property name, but parameter hints and type-checking still work.

Update: you can also ditch the constant and use the class prototype instead:
Update 2: This doesn't work on production builds. ↓↓↓ For some odd reason, all .name props inside mutatation method prototypes return the string "value" when it's built with Vue CLI 3 npm run build.

const rawError = true

@Module
export default class ActivitiesModule extends VuexModule {
  page: Page<OperationDTO> = {
    totalElements: 0,
    content: []
  }

  @Mutation setPage (value: ActivitiesModule['page']) { this.page = value }

  @Mutation cleanPage ()  { this.page = { totalElements: 0, content: [] }

  @Action({ rawError })
  async pullPage (/*...*/) {
      const response = await operationService
        .getByFinancialAccount_IdAndOccurrenceDateBetween(/*...*/)

      // DONT DO THIS ↓, IT WILL LIKELY BREAK IN PRODUCTION
      this.context.commit(ActivitiesModule.prototype.setPage.name, response.data)
  }
}

[Glandos]

As a "workaround", I use vuex-module-decorators along with Pathify:

import { VuexModule, Module } from 'vuex-module-decorators'
import { make } from 'vuex-pathify'

@Module
class Preferences extends VuexModule {
  grid = {
    editable: false,
    textOnHover: false,
    textHoverTimeout: 1000,
  }
}

Preferences.mutations = {
  ...make.mutations(Preferences.state),
  ...Preferences.mutations
}

export default Preferences

And in my component, I use get(), set() and sync() from pathify.