Vuex and Vue Draggable

I use a sortable list connected to a vuex store and get it like:

        let nested = computed({
            get: () => {
                return store.getters.getItems;
            }
        });
---------------------------------------
<draggable :list="nested.nested_form" ....

I don’t know if I am using vuex correctly here. Normally I would just call an action mutating the order inside Vuex. But I don’t know how to do this in this case with draggable.

I help myself now by copying the current state and handle it to the store to mutate the current state.

        const updatePos = () => {
            var localItems = JSON.parse(JSON.stringify(store.getters.getItems));
            store.dispatch('updateOrder', localItems);
        }

But using the computed property to keep the reactivity the state ALSO seems to get manipulated by draggable when rearranging the elements before the action changes it. When I do a console.log like:

      UPDATE_ORDER: (state, data) => {
        console.log(state.line_items_attributes.nested_form);
        var temp = cloneDeep(data.nested_form);
        state.line_items_attributes.nested_form = temp;
        console.log(state.line_items_attributes.nested_form);
      }

Both logs show exactly the same. But when removing the action/mutation the state doesn’t consist after reloading the page.

Sorry but I’m getting confused. What’s the problem here?
What’s the result you expected? What’s the result you get?

I already solved it by using a computed setter/getter. But thanks.

If you solve your own problems then please be so kind and

  • either post your solution so that somebody else can learn from it
  • or at least post that you already solved it so nobody else is spending needlessly time on it
1 Like