I have a problem that had me really ansious. I have a vue application where I have users profile, users timeline etc...
To make the short history, the problem is that:
In my user profile I have 4 pictures that I can upload or delete. So, when I update my pictures, sometimes the browser shows the old ones,but, when I do: CTRL+SHIFT+R the browser shows the new ones.
It seems a problem that can be fixed with location.reload(true) but it does not work for me. This is the flow:
1-Select picture 2-Send form to node server 3-In node server I upload the pictures and send the answer if everything its ok 4-dispatch vuex to get my data again and save it in the state 5-console.log the new state (it shows the new items updated) 6-location.reload(true) 7-here, where I should see my new images, it shows the old ones, however the state is updated. But, when i reload the page, it shows the new ones.
When I validate the form is ok I do the follow to dispatch edit and get the new data>
const response = await this.$store.dispatch('company/edit', this.formData)
if (response.success === true) {
await this.$store.dispatch('company/populate', this.currentUser.identifier)
}
First I dispatch the edit as follow>
async edit ({commit, rootGetters}, form) {
commit('setStatus', { loading: true, error: false, message: '' })
const endpoint = form.get('editing') === 'solutions' ? '/api/solution/register' : '/api/company/edit/' + form.get('editing')
const headers = { 'Authorization': 'Bearer ' + rootGetters['auth/getToken'] }
try {
await axios.post(endpoint, form, { headers: headers })
commit('setStatus', { loading: false, error: false, message: 'Success' })
return { success: true }
} catch (error) {
let message = ''
if (error.response) {
message = error.response.data.message
} else if (error.request) {
message = 'No response received from the server. If the problem persists contact the site administrator (' + error.message + ')'
} else {
message = error.message
}
commit('setStatus', { loading: false, error: true, message: message })
return { success: false }
}
},
Then if it is succcess>
const endpoint = '/api/company/' + identifier
const headers = { 'Authorization': 'Bearer ' + rootGetters['auth/getToken'] }
try {
const {data} = await axios.get(endpoint, { headers: headers })
// await commit('clear')
await commit('setData', data.company)
console.log('DATA COMPANY', data.company)
if (silent === false) {
commit('setStatus', { loading: false, error: false, message: 'Success' })
}
return { success: true }
} catch (error) {
......
And this are my mutations and state>
const state = {
data: null,
status: {
loading: false,
silent: false,
error: false,
message: ''
}
}
const mutations = {
setData (state, data) {
data.solutions = data.solutions === null ? [] : data.solutions
Vue.set(state, 'data', data)
return {success: true}
},
setStatus (state, status) {
Vue.set(state, 'status', status)
},
clear (state) {
state.data = null
return {success: true}
}
}
I have checked the database after I updated my pictures, and it updated, so its not a backend problem.
I dont know what to do, i have read a lot but i can not get to the solution. And the problems appears in some browsers and others dont
Thanks for reading
