Best way to re-render a Vuex data point?

Hi there,

I know there have been questions before about “forcing” a vuex getter re-render. But the issue I am having seems tricky because I’m updating an avatar URL but the actual URL itself does not actually change. For example: I have an s3 bucket where the avatar image is stored. The actual avatarUrl does not change, as we have it mapped to the users id and simply add avatar.jpg at the end of it.

So now the user can update their avatar image in their profile settings page, but because the actual avatarUrl doesn’t change (just the file stored there does) - the getter for the avatar image doesn’t actually re-render.

I hope that makes sense, and wondering what a good way around this would be? Perhaps, should I add on a new version number for each new image?

Thanks in advance!

2 approaches come to mind:

  1. Change the url to null and then back to the new image url
  2. Make use of a random version string attached to the img, e.g. `avatar.png?v=1234

But either way I think part of your issue, or at least something you need to account for, will be cache busting - which the random string may help with, but some browsers can have issues with query string cache busting which is why filename cache busting (also known as fingerprinting) is always best.

1 Like

Thanks for the help! I’ll look into these soluitions :slight_smile: