How do I use Vuex store to update a user-specific element in a child component?

Question

I have many components and quite a long code, but I will try to keep it simple without bombing you with a mountain of code.

I have a page where logged in users can create profile images. Each user has field in the database called profilePictureFileResourceId The image is stored in it's own component called FileResourceImage, which returns that image to the profilePictureFileResourceId.

So for example. When I display the image on the user profile page. I do it like this:

<template>
  <file-resource-image v-model="user.profilePictureFileResourceId" />
</template>

<script>
  import { userService } from "@/services/user";
  import FileResourceImage from "@/components/FileResourceImage";

  export default {
    components: {
      FileResourceImage,
    },

    data() {
      return {
        user: {
          profilePictureFileResourceId: null,
          email: "",
          name: "",
        },
      };
    },
  };
</script>

Then I have a navbar where I also show the profile picture.

<b-nav-item>
  <file-resource-image
    v-model="user.profilePictureFileResourceId"
    class="profile-image"
    default-icon="fas fa-user"
  />
</b-nav-item>

<script>
  import { userService } from "@/services/user";
  import FileResourceImage from "@/components/FileResourceImage";

  export default {
    components: {
      FileResourceImage,
    },
    data() {
      return {
        user: {},
      };
    },
  };
</script>

My issue is that whenever a user uploads an image to their profile page, they need to refresh the browser in order for the image to appear in the navbar. I would like the navbar component to automatically update and show the image when it is uploaded to the profile page. I have read about vuex and stored procedure, but the examples shown in the documentation are very simple and only focus on click events. So I don't know where to begin.

I only set up the basics.

const store = createStore({
  state() {
    return {
      profilePictureFileResourceId: null,
    };
  },
});

Answer 1

I'm assuming the interaction would happen like this: The user POSTs new image, and then response would include the new image name (or return success, and then another API calls the newly updated data). If you have the new image name in the response, you should be able to update it in the store.

It would look something like this (if the new id was in the response already and doesn't require an additional request)...

const store = createStore({
  state: {
    profilePictureFileResourceId: null
  },
  mutations: {
    setNewImage (state. newId) {
      state.profilePictureFileResourceId = newId
    }
  },
  actions: {
    updateProfileMug(context, imageFile) {
      let formData = new FormData();
      formData.append('file', imageFile);
      axios.post(
        '/single-file',
        formData,
        { headers: {'Content-Type': 'multipart/form-data'} }
      ).then(({data})=>{
        // assuming profilePictureFileResourceId is in the response data
        context.commit('setNewImage', data.profilePictureFileResourceId)
      })
    }
  }
})

to call, use either mapActions('updateProfileMug') and this.updateProfileMug(image) or store.dispatch('updateProfileMug', image) from the component.

Note that the state inside createStore is not a function, but just a plain object.

Also note that if image name is the same the browser doesn't know that it should load the new image. If that is the case, you can use use the timestamp hack ...jpg?ts=1658940428 which will force the browser to reload the resource. Note that this assumes that the reactivity is triggered correctly after an update.