Watching on nested properties in child classes

[Mootook]

Hello, I've been toying around with vue-class-store recently, but I'm wondering if the root store is the only way to dictate watchers. Perhaps I misunderstand the necessary setup, but as a store grows it probably helps to abstract properties out to other classes, and wondering if each of those classes could be responsible for their own watchers in turn.

An example to clarify:

class Child {
  constructor () {
    this.childValue = 0
  }
  'on:childVale' () {
    console.log('Child watch has triggered') // doesn't work
  }
}

class RootStore {
  constructor () {
    this.rootValue = 0
    this.child = new Child()
  }

  'on:rootValue' () {
    console.log('Root value has changed') // works
  }

  'on:child.childValue' () {
    console.log('Child watch has triggered - from root') // works
  }
}

If this is not the intended structure of the store, let me know a clean way to separate out components of the root store. Thanks!

[davestewart]

Hey!

Great that you're trying it out, and thanks 😃

OK, here's an example of it working here: https://codesandbox.io/s/trusting-microservice-oc21x?file=/pages/examples/basic.vue

Things to note:

• you must add the @VueStore decorator to all models!
• you must declare the properties as class properties, not just assign them in the constructor

Remember, the library just rebuilds the classes as Vue instances, so if you want the full Vue functionality (i.e. watches) physically on child objects, they also need to be converted using the decorator.

I have various deeply nested models in a couple of my apps, and generally only use the decorator on the top level, and watch from the top level, but it works fine for my use cases.

As for a global store setup, I'm working on this at the moment, and plan to release a more formalised setup, maybe before Christmas (I'm super busy with another project so that's not a priority right now).

Out of interest, you working with Vue 3 or 2?

[davestewart]

As a side note, I find in a Vue app, watchers are only useful in some use cases, especially when computed properties provide a better data flow.

Let me know if you need any additional eyes / input.

[Mootook]

@davestewart Thank you!

Okay, that makes sense. Part of it is me still untangling some mental habits I have from other state management libraries. The team I'm on has already used vue-class-store in a project, but I'm looking into implementing it into another, larger one. By global store setup, do you mean not using the provide/inject? That's how we currently use it. Also, I'm working in Vue3. Thanks again.

[davestewart]

Hey hey,

Yes – global state – the prevailing wind which seems to be moving away from things like Vuex and towards provide / inject.

Totally happy to chat over the options here on in another ticket.

The Vue 3 version of this is again just a factory function to rebuild the class as a reactive object and take away all the drudgery of setting things up things manually.

LMK!