Problem with object setter, nested array, and non-strict state

[widgetlords]

Alright, I have spent the better part of a day trying to debug this issue. I am not sure if it can or should be fixed but I think it should be documented somewhere.

I have a vuex state that starts out with very little structure (I can't know ahead of time) and so a lot of it is marked as non-strict. After all the data is loaded I end up with a situation where I have a root object in the state with a nested array. Something like this:

let state =
{
  something:
  {
    nested: [1, 2, 3, 4]
  }
};

Note that something is configured as non-strict.

Now I want to remove an entry from that nested array:

let nested = Array.from(store.state.something.nested); // Make a copy so that we don't edit state outside of mutation
nested.splice(2, 1); // nested === [1, 2, 4]
store.commit("something$set", { key: "nested", value: nested });

I expect state.something.nested to be [1, 2, 4] but what I actually get is [1, 2, 4, 4] A brief look at the relevant code in vuex-dry seems to show the problem: https://github.com/eunjae-lee/vuex-dry/blob/3663ea5afb93cdf7ffc554cb6b8c5b0b2dc58f1d/src/module/mutations_builder.ts#L78-L113 Line 94 calls into lodash.merge. The documentation there doesn't really indicate it but running this code produces exactly the result I am seeing:

_.merge([1, 2, 3, 4], [1, 2, 4]);

I've tried to workaround the issue by passing { strict: true } in the payload but no luck. I figure the check on line 84 is seeing that I configured the state as non-strict elsewhere.

My workaround for now is to create a custom mutation that sets the nested array.

Any ideas?

[eunjae-lee]

Hi there, sorry for getting back here so late.

If you're still on this, could you provide a code sandbox so that I can try it out? You can use the following template: https://codesandbox.io/s/vuex-dry-template-n4vuv