Auth-module: [Question] How do I update the vuex $auth.user properties?

[amdp]

Hi, I need to let every user to update their images, and automatically remove the previous image. If I do it, the $auth.user.image does not change even with fetchUser() so I even have a problem because the image the user has isn't there anymore.
How can I dynamically update all the user data?

useredit() {
      try {this.imageUpload()} catch(err){console.log(err + ' image not uploaded.')}
      axios.put(
        '/db/user', {
          id: this.id,
          name: this.formName,
          surname: this.formSurname,
          email: this.formEmail,
          password: this.formPassword,
          image: this.formImageFilename.name,
        })
        .then(res => {
          axios.delete('/db/userimage', {data: {delimage: this.$auth.user.image}} ) //this will create a problem
          this.$auth.$storage.setState(this.$auth.$state.user.image, this.formImageFilename.name) // this ugly trial to change the image in the vuex does not work
          console.log(this.$auth.user.image) // this proves it didn't work
        })
        .catch(err => {
          console.log(err)
        })
    },

_{This question is available on Nuxt community (#c310)}

[cmty[bot]]

This issue as been imported as question since it does not respect auth-module issue template. Only bug reports and feature requests stays open to reduce maintainers workload.
If your issue is not a question, please mention the repo admin or moderator to change its type and it will be re-opened automatically.
Your question is available at https://cmty.app/nuxt/auth-module/issues/c310.

[amdp]

I solved this thanks to Pi0 and having in the token only the id of the user, while the other data to be resolved dynamically.

[MathiasCiarlo]

So the fetchUser call fetches from the userinfo endpoint of your auth provider. If you successfully manage to upload the image, then the subsequent fetchUser call should include the link of the updated image. Can you check if the fetchUser call actually gets the updated image after upload? Console log the user response in the fetchUser function.

Edit: Didn't see that you solved it. That's good :)

[amdp]

I only have a problem I am not solving: when I upload the new image, nodemon recompiles the app, so the image :src="require('path'+$auth.user.path)" does not find the module of the image if I fetch the user before nodemon has completely reupdated the app.
Any ideas?

[MathiasCiarlo]

Sounds like you are loading the image the wrong way. I'm no expert, but I think there is a way to load the image runtime. Is it the require that is only supported during build?

[amdp]

Yes, it seems like to be the only one when it is dynamic:

https://github.com/nuxt/nuxt.js/issues/448

https://github.com/vuejs-templates/webpack/issues/126