8

In vue's official docs I found the usage about $root at the edge cases section. "Edge Cases" makes me feel like using this.$root(or this.$parent) to mutate the data of root instance in a child component is not a normal or recommended way.

I know vuex is the best state management option for large and complex vue application and it has more advanced features and better for debugging. But that does not convince me the this.$root is not good.

As the docs says when this.$root to mutate root data is not possible to track when and where data changes happen and is not good for debugging. But what I want to know is:

Is this.$root approach only has disadvantages about debugging? Except for debugging related problems, is there any other issue of using this.$root to mutate the root data? If so can anyone give me a small example to showcase that problem because I cannot think out any case to avoid using it (suppose my vue app is not that large and complex). Thanks in advance!

1 Answer 1

14

This is all about good and bad architecture. You should always design your code so you share the least data you can (this is not even related to Vue).

Your vue component has private and public methods and fields. Consider all the method in component to be private. And $emit and props to be public. Accessing private methods and fields are always a bad idea, why?:

  • It's not clear who changed the state. If you have something like @click some deep child, you could end up in the whole tree of components rerendering because you might wanna change data inside of root.
  • How would you unit test your component? You will need to attach the root all the time.
  • Ok, imagine then that you have a huge enterprise application. And you access $root in multiple places. Now a new developer comes and changes the call signature withing one of a component but forgets to change it from another one. You will end up in a broken app. How is it different from vuex? In your vuex you should have modules, so there won't be a single place that all components access.
  • So debugging. Tools like vue-devtools track vuex but not state. Now imagine that some data just magically change in your component. And this is because another developer did something like setInterval(() => $root.setDataTime(Current time ${Date.now()}), 1000). You check the changes and there're no commits in the vuex nor on your component.
2
  • Hi @deathangel908, can you give me an example regarding to the "a new developer comes and changes the call signature within one of a component but forgets to change it from another one"? Do you mean something like there is an object from root data and in a component a guy changed the object's structure(maybe delete some props) so in other components it may break existing code?
    – STEN
    Jul 20, 2019 at 5:51
  • Yep, he changes in one of the child components the argument types and changes the handler in the root component accordingly, and edits all the other places this root method is called, but he misses a single place because something like let proxied = this.$root; proxied.method() (you don't use typescript, right?). If you split your system to modules in vuex, there won't be a single place that shares all the date. Another way you can share common function is to do import/require, but in this case, you a) explicitly import the method. b) you can't edit component data. Jul 20, 2019 at 7:17

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.