gertqin / vuex-class-modules

Typescript class decorators for vuex modules
MIT License
193 stars 20 forks source link

Allow composition of Action, Mutation and Getter #58

Open nicolidin opened 3 years ago

nicolidin commented 3 years ago

Hi,

It would be interesting to allow the composition of each part of a module: State, Getters, Mutations, and Actions as different composed class like this example below.

class UserState {
  firstName = "Foo";
  lastName = "Bar";
  myFookingMap = new Map<String, NodeModel>();

  constructor() {
    this.myFookingMap.set("a", new NodeModel("a", "yehhhh"));
    this.myFookingMap.set("b", new NodeModel("b", "cachouu"));
  }
}

class UserMutation {
  constructor(private userState: UserState) {}

  @Mutation
  setFirstName(firstName: string) {
    this.userState.firstName = firstName;
  }

  @Mutation
  setLastName(lastName: string) {
    this.userState.lastName = lastName;
  }

  @Mutation
  setMap() {
    this.userState.myFookingMap.set("c", new NodeModel("c", "fiou"))
    this.userState.myFookingMap.get("a")!.name = "superr"
  }
}

class UserAction {
  constructor(private userState: UserState, private mutation: UserMutation) {}

  @Action
  async loadUser() {
    this.mutation.setFirstName("yao");
    this.mutation.setLastName("yeh");
  }
}

@Module
export class UserModule extends VuexModule {
  state = new UserState();
  mutation = new UserMutation(this.state);
  actions = new UserAction(this.state, this.mutation);

  // getters
  get fullName() {
    return this.state.firstName + " " + this.state.lastName;
  }
}

Do you think you can implement such a feature??

It would allow doing abstraction on each different part of a store, and thus for example make UserMutation extends from an interface or a class, and the same for UserAction etc...

Futhermore it would allow sharing parts (action, mutation, state, getters) in different modules, as below:

export const projectResourceStore = new Module({
  namespaced: true,
  state: ResourceState,
  getters: ResourceGetter,
  mutations: ResourceMutation,
  actions: ProjectResourceAction,
});

export const homeResourceStore = new Module({
  namespaced: true,
  state: ResourceState,
  getters: ResourceGetter,
  mutations: ResourceMutation,
  actions: HomeResourceAction,
}); 

Thanks! Hope you can do something @gertqin ! (what do you think in therm of complexity to implement such a feature?)

LifeIsStrange commented 2 years ago

@gertqin Hi, friendly ping, this feature is very important for our team, I was wondering whether you think progress will be made about it this year?

gertqin commented 2 years ago

Sorry for not replying to the original issue. But as I'm no longer using this module myself and Pinia is the new recommended state management library (which also solves all the problems this library is trying to solve), I probably won't be adding any new features to this library anymore.

nicolidin commented 2 years ago

You should check this issue: https://github.com/vuejs/pinia/issues/802