What is the best way to deal with nested objects/classes?

[philippedasilva-orizone]

Hi all,

Up until now, I had a usersStore that would have a users and currentUserIndex properties as well as the usual register, signin, signout actions and two getters: currentUser (which would return the user in the currentUserIndex position and a simple isSignedInboolean.

One user is defined using these types:

export class GoogleAccount {
  email: string;
  accessToken?: string;
  expireAt?: number;
  refreshToken?: string;

  constructor(
    email: string,
    accessToken?: string,
    expireAt?: number,
    refreshToken?: string
  ) {
    this.email = email;
    this.accessToken = accessToken;
    this.expireAt = expireAt;
    this.refreshToken = refreshToken;
  }
}

export class UserSettings {
  googleAccounts: GoogleAccount[];

  constructor() {
    this.googleAccounts = [];
  }
}

export class User {
  public username: string;
  public password: string;
  public settings: UserSettings;

  constructor(username: string, password: string) {
    this.username = username;
    this.password = password;
    this.settings = new UserSettings();
  }
}

Nothing really fancy nor complicated, I'd say...

However, I'm struggling to get my current user settings saved properly in the store (which is by the way persisted in the localstorage).
Could anyone advice me on the best pattern/approach to use so that I can easily update my currentUser.settings.googleAccounts array and have it being properly stored in the state?

On another note, I'm looking to split the Users from the currentUser into two different stores (I'd like to use localStorage for Users and sessionStorage for currentUser) but I don't believe there is an easy way to reference the currentUser instance in one store and have it updating the actual user entry in the Users array inside another store? right?

Thanks

P.S.: @posva great job with this package.

[ScottAwesome]

@posva I have a similar question as this as well. This would allow for a mobx style approach to building out stores, which is not orthogonal to the spirit of Vue's reactivity system.

Would be great to get some official guidance on using complex objections in a store.

[douglasg14b]

This worked well with Vuex when using Vuex Class Components.

You could store class instances in Vuex, reactivity worked fine, and all the class methods & behaviors where maintained. I had hoped Pinia also supported this, maybe it doesn't? If not, that's a multiplier if not an exponent on application complexity...