Here is the initial structure of my vuex state in a VueJS project:
state: {
level1prop: null
}
After dynamically changing and mutating it, the structure becomes:
state: {
level1prop: {
level2prop: {
level3prop: {
"customKey1": { /* some object 1 */ },
"customKey2": { /* some object 2 */ },
...
}
}
}
}
I then continue to add
"customKeyN": { /* some object N */ }level3prop. It's important for me that every change triggers a watcher monitoring changes to level1prop in the state.
Initially, I used the following mutation update logic:
If (!state.hasOwnProperty("level1prop"))
state["level1prop"] = {};
else if (state["level1prop"] === null || state["level1prop"] === undefined)
state["level1prop"] = {};
if (!state["level1prop"].hasOwnProperty("level2prop"))
state["level1prop"]["level2prop"] = {};
else if (state["level1prop"]["level2prop"] === null || state["level1prop"]["level2prop"] === undefined)
state["level1prop"]["level2prop"] = {};
if (!state["level1prop"]["level2prop"].hasOwnProperty("level3prop"))
state["level1prop"]["level2prop"]["level3prop"] = {};
else if (state["level1prop"]["level2prop"]["level3prop"] === null || state["level1prop"]["level2prop"]["level3prop"] === undefined)
state["level1prop"]["level2prop"]["level3prop"] = {};
let payloadObj = { "customKey1": { /* some object 1 */ } };
state["level1prop"]["level2prop"]["level3prop"] = payloadObj;
Although this setup creates the desired structure, the watcher is not triggered. Despite attempting various refactors based on advice from here, none have successfully triggered the watcher. Here is an example of one attempted option:
If (!state.hasOwnProperty("level1prop"))
state = Object.assign(state, { "level1prop" : {} });
else if (state["level1prop"] === null || state["level1prop"] === undefined)
state = Object.assign(state, { "level1prop" : {} });
if (!state["level1prop"].hasOwnProperty("level2prop"))
state["level1prop"] = Object.assign(state["level1prop"], { "level2prop" : {} });
else if (state["level1prop"]["level2prop"] === null || state["level1prop"]["level2prop"] === undefined)
state["level1prop"] = Object.assign(state["level1prop"], { "level2prop" : {} });
if (!state["level1prop"]["level2prop"].hasOwnProperty("level3prop"))
state["level1prop"]["level2prop"] = Object.assign(state["level1prop"]["level2prop"], { "level3prop" : {} });
else if (state["level1prop"]["level2prop"]["level3prop"] === null || state["level1prop"]["level2prop"]["level3prop"] === undefined)
state["level1prop"]["level2prop"] = Object.assign(state["level1prop"]["level2prop"], { "level3prop" : {} });
let payloadObj = { "customKey 1": { /* some object 1 */ } };
state["level1prop"]["level2prop"]["level3prop"] = Object.assign(state["level1prop"]["level2prop"]["level3prop"], payloadObj);
While this approach also gives the desired structure, the watcher remains untriggered. Other attempts that failed to trigger the watcher include:
...
state["level1prop"]["level2prop"]["level3prop"] = Object.assign({}, state["level1prop"]["level2prop"]["level3prop"], payloadObj);
...
and
...
Object.assign(state["level1prop"]["level2prop"]["level3prop"], payloadObj);
...
Is there any effective way to trigger the watcher for changes in such a complex, deeply nested object state?