On my dashboard page, I encounter an issue where my computed property giveaways does not update when navigating back to the page from other links. The data retrieval works fine on page refresh but fails to update the computed property upon returning. Despite receiving the data in the response, it seems that the rendering is affected due to this issue. I am utilizing axios in vuex and have attempted using this.$forceUpdate without success. I'm unsure of the correct placement for this method call. My goal is to ensure that the computed property updates every time users visit the dashboard.vue page, whether through refreshing or vue-route navigation, so it reevaluates the data from the server side.
Below is the script for Dashboard.vue:
import {mapState} from 'vuex'
import { mapGetters } from 'vuex'
export default{
ready(){
this.loaded =false;
},
data: () => ({
cards: [],
loaded: true
}),
computed:{
...mapState({
Giveaway: state => state.Threshold.giveaways
}),
giveaways(){
return this.$store.getters.doneGiveaways
},
testing(){
return this.$store.getters.loadTesting
}
},
watch:{
giveaways(newVal, oldVal){
console.log(newVal + 'test');
},
testing(newVal, oldval){
console.log(newVal)
},
deep: true
},
mounted(){
this.$store.dispatch('getGiveAways');
this.cards[2].result_val = this.$store.getters.doneGiveaways;
if(this.$store.getters.doneGiveaways > 0){
this.cards[2].background_color = 'orange';
console.log('wew');
}
}
}
And here is Threshold.js Vuex:
import Vue from 'vue';
import VueAxios from 'vue-axios';
import axios from 'axios';
Vue.use(VueAxios, axios);
const state = {
giveaways: null,
testing: ['wew']
}
const actions = {
getGiveAways : ({commit}) =>{
axios({
url : '/prod/api/thresholds_settings',
method: 'post',
data : {}
})
.then(response=>{
if(response.status == 200){
commit('SET_GIVEAWAYS', response.data.total_giveaways)
}
})
.catch(error=>{
if(error.response){
console.log('something happened')
}
});
}
}
const mutations = {
SET_GIVEAWAYS : (state, obj)=>{
state.giveaways = obj
}
}
const getters = {
doneGiveaways(state){
return state.giveaways
},
loadTesting(state){
return state.testing
}
}
export default {
state, mutations, actions, getters
}