Storing component instances creates a circular reference loop in strict mode

[SergioCrisostomo]

Version

3.1.1

Reproduction link

https://jsfiddle.net/Sergio_fiddle/zkrsa4g1/3/

Steps to reproduce

Store a pointer to a component instance in Vuex with strict: true.

What is expected?

No errors.

What is actually happening?

RangeError: Maximum call stack size exceeded

Vuex is adding watchers to all nested properties to warn if there are non-immutable changes inside a object (because of the strict mode help warnings) and does not stop when its entering itself.

In other words: when entering a component we can re-enter the store as a component property, and in the store we have a component that has a store etc etc ... we are in a loop

---

I think either:

• Vuex should officially discourage from saving pointers of instances of Vue components in it

or

• add a check to stop going deeper if the nested object it the Vuex instance itself

[Sequoya42]

Still got this issue in strict mode, loop until max stack exceeded.
Even used deepCopy (from vuex repo)
dispatch("setStuff", deepCopy(stuff));
=> fails in strict mode, works fine without strict enabled