How to keep the positions of posts when they are moved when the page is refreshed?

Question

Vue.js

Good afternoon dear friends!
I'm doing that task on vue , where there is an item:



First I got these posts from localstorage , where I could successfully swap posts while maintaining positions.
Now, I get these posts already from the firebase database and I also try to save their position in localstorage , and when updating in the first milliseconds, the posts are not where they should be, but my firebase request goes away , and the posts again become in the order in which they are arrived from the server.

I need posts to arrive from the server, their positions by id are sent to localstorageor as it is more convenient, but so that I can drag them and it's all saved as described in those tasks (above) locally.

Here is the firebase request in vuex :

async fetchPosts({ commit }) {
      try {
        const response = (await firebase.database().ref(`/posts/`).once("value")).val() || {};

        const posts = Object.keys(response).map((key) => ({
          id: key,
          ...response[key],
        }));

        return posts;
      } catch (e) {
        commit("setError", e);
        throw e;
      }
    }

Did a mutation like:

pushPosts(state, posts) {
   state.posts = posts
}

But it constantly updated state on a new request to firebase . And the request leaves at each update.
Please help resolve this issue. If you have your own, then ask, I will sign in more detail!
Thanks and have a nice day!

Answer 1

Well, that means you need to sort the posts each time they are received from the database, that is, fetchPosts should have sorting logic based on data from localstorage. Well, update the order in localstorage, with each drag and drop of posts.