I am new to javascript and Vuex.
I have many Orders in a table (linked to state.runningOrders.data), then I selected these orders and canceled them(thus trigger the CANCEL_ONE_ORDER). When the response from server arrived, I just removed the order with specified id from the array, so the corrospending row will disapper from the table. There should be no rows after canceling. However, visually, there are always some rows left in the table.
I think it works like multiple threads or coroutine. So the state.runningOrders.data need some concurrency mechinism.
const actions = {
async [CANCEL_ONE_ORDER](context, data) {
const data_res = await RestClient.get("cancel_one_order", data.id +"/" + data.coin1+"/"+data.coin2);
context.commit(CANCEL_ONE_ORDER_END, data_res.data);
},
}
const mutations = {
[CANCEL_ONE_ORDER_END](state, res) {
state.runningOrders.data = state.runningOrders.data.splice(state.runningOrders.data.findIndex(item => item.id === id), 1);
},
}
How to remove the element from the array atomically (concurrently)?
I think it works like multiple threads or coroutine.
No, JavaScript runs a single thread per realm (roughly, per global environment). You can have multiple threads, but other than explicit shared memory, they can't access the same data structures (instead, they communicate via messaging). (Logic in async functions can overlap, if function A is paused at an await and function B continues.)
splice returns an array of the deleted elements. Yopu're assigning that back to your variable here:
state.runningOrders.data = state.runningOrders.data.splice(state.runningOrders.data.findIndex(item => item.id === id), 1);
That does the opposite of what you seem to want: It updates data with an array of the elements you deleted from it, rather than with the ones you want to keep.
Instead, use filter:
state.runningOrders.data = state.runningOrders.data.filter(item => item.id !== id);
That creates a new array from the elements that match the callback's test (in this case, ones that don't have a matching id).
I'm not sure if I understand completely, but it sounds like you're trying to delete a row from a table (thus, probably an object from the database) and you're ending up with a blank row.
From that description, it sounds to me like you're not deleting the object, but simply erasing the data within the object. Then you're left with a blank object, which is creating your empty row.