Split getter/mutation/action Vue + Typescript?

Question

typescript

Example 1

// store/modules/user.ts
import { VuexModule, Module, Mutation, Action } from 'vuex-module-decorators'
@Module({ namespaced: true, name: 'test' })
class User extends VuexModule {
  public name: string = ''
  @Mutation
  public setName(newName: string): void {
    this.name = newName
  }
  @Action
  public updateName(newName: string): void {
    this.context.commit('setName', newName)
  }
}
export default User

Example 2
I get something similar, only a little longer.

Example 3


Example 4

This is the approach I use, file by mutation, actions and getters. I like him more. better follows DRY and SOLID.

As you can see, everything in one class creates a huge file, I'm not sure if this is correct. previously used the approach from Example 4.

Which is preferable and when, why?
How are you doing?

Answer 1

I am making one module per entity. There is no point in splitting the entity itself into separate files. This is SOLID, which "Example 4" just violates somewhat. But sometimes several entities use a repeating state and behavior, so it’s worth taking it out separately and fumbling between modules. This is DRY. That is, the division is based on functionality, and not on type. Whether 'vuex-module-decorators' is used or not. It's the same with components.

Answer 2

Personally, the approach with classes for vuex did not take root for me, it is much more convenient for me to decompose logically separate sets of functions into separate files, and then simply combine them into a module. Without an extra ton of boilerplate.