How to get updated value from vuex store in component - vue.js

Question

I want to show a progress bar in a component. The value of the progress bar should be set by the value of onUploadProgress in the post request (axios). Till so far, that works well. The state is updated with that value correctly.
Now, I am trying to access that value in the component. As the value updates while sending the request, I tried using a watch, but that didn't work.
So, the question is, how to get that updated value in a component?
What I tried:
component.vue
computed: {
uploadProgress: function () {
return this.$store.state.content.object.uploadProgressStatus;
}
}
watch: {
uploadProgress: function(newVal, oldVal) { // watch it
console.log('Value changed: ', newVal, ' | was: ', oldVal)
}
}
content.js
// actions
const actions = {
editContentBlock({ commit }, contentObject) {
commit("editor/setLoading", true, { root: true });
let id = object instanceof FormData ? contentObject.get("id") : contentObject.id;
return Api()
.patch(`/contentblocks/${id}/patch/`, contentObject, {
onUploadProgress: function (progressEvent) {
commit("setOnUploadProgress", parseInt(Math.round((progressEvent.loaded / progressEvent.total) * 100)));
},
})
.then((response) => {
commit("setContentBlock", response.data.contentblock);
return response;
})
.catch((error) => {
return Promise.reject(error);
});
},
};
// mutations
const mutations = {
setOnUploadProgress(state, uploadProgress) {
return (state.object.uploadProgressStatus = uploadProgress);
},
};
Setup:
Vue 2.x
Vuex
Axios

Answer 1

Mutations generally are not meant to have a return value, they are just to purely there set a state value, Only getters are expected to return a value and dispatched actions return either void or a Promise.
When you dispatch an action, a dispatch returns a promise by default and in turn an action is typically used to call an endpoint that in turn on success commits a response value via a mutation and finally use a getter to get the value or map the state directly with mapState.
If you write a getter (not often required) then mapGetters is also handy to make vuex getters available directly as a computed property.
Dispatch > action > commit > mutation > get
Most of your setup appears correct so it should be just a case of resolving some reactivity issue:
// content.js
const state = {
uploadProgress: 0
}
const actions = {
editContentBlock (context, contentObject) {
// other code
.patch(`/contentblocks/${id}/patch/`, contentObject, {
onUploadProgress: function (progressEvent) {
context.commit('SET_UPLOAD_PROGRESS',
parseInt(Math.round((progressEvent.loaded / progressEvent.total) * 100)));
},
}
// other code
}
}
const mutations = {
SET_UPLOAD_PROGRESS(state, uploadProgress) {
state.uploadProgress = uploadProgress
}
}
// component.vue
<template>
<div> {{ uploadProgress }} </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed: {
...mapState('content', ['uploadProgress']) // <-- 3 dots are required here.
}
}
</script>