[QUESTION] - Store State Sync

[go4cas]

For the following Vapi:

import Vapi from 'vuex-rest-api';

const posts = new Vapi({
  state: {
    posts: [],
    post: {},
  },
})
  .get({
    action: 'getPost',
    property: 'post',
    path: ({ id }) => `/api/posts/${id}`,
  })
  .get({
    action: 'listPosts',
    property: 'posts',
    path: '/api/posts',
  })
  .put({
    action: 'updatePost',
    property: 'post',
    path: ({ id }) => `/api/posts/${id}`,
  })
  .getStore();

export default posts;

Having a component that calls this.listPosts(); in the created. This populates the posts correctly in the store.

Now, when updating one of the posts using updatePost, it only updates the post object, and not the posts array of object. So, this creates an "out-of-sync" perception.

Is there an easy way to keep these in sync? Or, is the only way to call listPosts after successful updatePost?

[christianmalek]

In this case you have to handle the logic by yourself with onSuccess.

Example:

const posts = new Vapi({
  state: {
    posts: [],
    post: {},
  },
})
  .put({
    action: 'updatePost',
    property: 'post',
    onSuccess: (state, payload, axios) => {
       // if you set the onSuccess function you have to set the state manually
       state.post = payload.data[0]
       state.posts = /* your additional logic */
    },
    path: ({ id }) => `/api/posts/${id}`,
  })
  .getStore();

[go4cas]

Thanks, @christianmalek. That did the trick!

Might be an idea for a future enhancement to somehow include this in the library.

Thanks for the cool lib!

[christianmalek]

Thanks for the compliment!

At the moment I don't know how I should integrate your request into Vapi without making it more complicated. If you have precise ideas I would love to hear them. :)