VUEX Update data model with Computed mapGetters

Question

I'm new to Vuex and I'm trying to update the card.imageURL property from the data model every time a computed getter is updated.

The getter is updating as I can observe changes to the HTML of the component. I'm just not being able to use this event to update the data model.

I tried to do it using the mounted() method but the if statement shown bellow is not being executed.

Any suggestions?

Thanks!

<script>
import { mapGetters, mapState } from "vuex";
export default {  
  created() {
    // do some initial fetch
  },
  data() {
    return {
      card: {
        title: "",
        cost: 0,
        description: "",
        imageURL: "",
      },
    };
  },
  mounted(){
    if(this.rewardsImageUrl){
      this.card.imageURL = this.rewardsImageUrl;
      console.log(`set imageURL to card data model: ${this.card.imageURL}`);
    }
  },    
  computed: {
    ...mapState(["user", "setUploadedImageUrl"]),
    ...mapGetters(['rewardsImageUrl'])
  },
  methods: {
    close() {
      this.$emit("close");
    },
    async addCard() {
      this.$emit("close");
    },

    selectImage() {
      this.$refs.selectImage.click();
    },

    async previewImage(event) {
      this.imageFile = event.target.files[0];
      this.$store.dispatch("uploadRewardsImage", this.imageFile);
    },
  },
};
</script>

Answer 1

To listen to changes you can use watch like this:

  computed: {
    ...mapState(["user", "setUploadedImageUrl"]),
    ...mapGetters(['rewardsImageUrl'])
  },
  watch:{
      setUploadedImageUrl(){
        console.log('setUploadedImageUrl changed', this.setUploadedImageUrl)
      },
  },