BonBonSlick
@BonBonSlick
Vanilla Web Architect

Split getter / mutation / action Vue + Typescript?

Пример 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


Пример 2
у меня выходит что-то похожее, только чуть длиннее.

Пример 3


Пример 4

вот такой подход использую я, по файлу на мутации, екшены и геттеры. Он мне больше по душе т.к. лучше следует DRY и SOLID.

Как видно, все в одном классе создает огромный файл, не уверен правильно ли это т.к. ранее исопльзовал подход из Пример 4.

Что придпочтительнее и когда, почему?
Как делаете вы?
  • Вопрос задан
  • 110 просмотров
Решения вопроса 1
@shimarulin
Software Engineer
Я делаю один модуль на одну сущность. Смысла разбивать сущность саму по себе на отдельные файлы нет. Это SOLID, который "Пример 4" как раз несколько нарушает. Но иногда несколько сущностей используют повторяющееся состояние и поведение, вот его стоит выносить отдельно и шарить между модулями. Это DRY. То есть разделение идет по функционалу, а не по типу. Независимо от того, используется 'vuex-module-decorators' или нет. То же самое и с компонентами.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Aetae
@Aetae
Тлен
Лично у меня подход с классами для vuex не прижился, мне куда удобней разложить логически отдельные наборы функций по отдельным файлам, и потом просто объединить в модуль. Без лишней тонны boilerplate.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы