Is it possible to store images in vuex? Should this be done?

Question

I'm trying to store profile thumbnails for easy access. Since I'm looking to reduce resource consumption by eliminating the need to get the image path every time the user reloads the page. Can we store image data in vuex? If so, should we do it?

Answer 1

Yes, you can!

After the image responds, pass the image to URL.createObjectURL() (Documentation). This will cache the image in the browser and provide a local image URL that you can reuse:

const imageUrl: string = URL.createObjectURL(response.data);
if (imageUrl) {
     // 使用以下对象更新您的存储：
     { id: imageId, url: imageUrl };
}

You can then search by id in the imageUrl[] state where this URL is saved and retrieve the URL again.