Accessing objects by index with bracket notation
ReynerHL opened this issue · comments
Vue version: 2.5.13
Vuex version: 3.0.1
Issue Description:
I've prepared this fiddle first for view how the vue-deepset handles the underlying data when dealing with array: https://jsfiddle.net/reynerhl/t1uphbk0/
But, if I have an object as underlaying data instead, vue-deepset did not handles it as I expected. Here you have a version with object: https://jsfiddle.net/reynerhl/rf06rkdx/1/
I would like to know if I'm doing something wrong. I've tested it with previous Vuex version and also it did not work as I expected.
Hope vue-deepset just need a minor tweak for this.
Currently on vacation and will check this out when I get back. Thanks.
so this works if you quote the index. see updated fiddle https://jsfiddle.net/rf06rkdx/5/
the reason you need to quote the index is because you are working with an object so when the proxy is built, it only adds a lookup path for path.to["index"] since it is acceptable to look up a key using an integer i can probably add a quoted and unquoted path for integer keys
added additional support for notations with integer keys and published v0.5.3 to npm. you can now do a.1.b, a["1"].b, a[1].b
This is awesome !!
In your documentation, the recomended way for updating a value handled by vue-deepset is by this kind of method:
this.$vuexSet('WarehouseModule.returnProducts.selectedLineItems', newSelectedLineItems);
But I've noticed that if we assign a value directly to the computed property targeted by vue-deepset, it actually updates the underlaying value in Vuex, take a look a this fiddle in the @input event handler. Do you think it is ok to use it in this way ?
https://jsfiddle.net/reynerhl/4y3t019p/2/
I just can't understand why this npm package have no more stars. Thanks in advance for your comments.
You can do it either way,
The way the code works is say for vuex it creates a Proxy object that creates/updates a flat mapping object who's keys are every permutation of the objects paths. That way when you reference x[path.to.nested] it is just looking up the literal key path.to.nested. A Proxy is used to allow dynamic addition of fields to the object. If Proxy is not used only the pre-defined fields at create time would be available, you can see this with the useProxy = false option.
Any VUEX mutations are performed with the vuexSet (https://github.com/bhoriuchi/vue-deepset/blob/master/src/vue-deepset.js#L75) method which simply dispatches the VUEX_DEEP_SET mutation which itself simply calls vueSet on the store with the path and value you are mutating.
this.$vuexSet just exposes the backend mechanism for updating the vuex store
It was a great explanation, I just only wanted to know if you think we can update a Vuex entry using the vue-deepset library as follow:
this.order[`elements[1].val`] = newValue;Instead of:
this.$vuexSet('order.elements[1].val', newValue);Thanks for your time.
sorry, lol, yes its fine
I've been using the $vuexSet all the times, but I was wondering what happens if we try the other way, and voila, It works !! But before using it I just wanted to check with you if this is working as you expected.
In this fiddle we have an example in the @input event handler:
https://jsfiddle.net/reynerhl/4y3t019p/2/
Perhaps, you might want to update the doc in order to add this other way for updating Vuex entries....from my point of view, it is very cool.