Did you figure out of this? I am facing the same issue at this point and would really like a solution that does not involve setting "Cache-Control: no-store".
Persisting component state when clicking back button in browser
In my application which uses Laravel in the backend, when a user updates the state of a Vue component in real-time (a very common occurrence) and then clicks the back button in the browser, the component's state on the previous page does not stay up to date because of browser caching (I am testing in Chrome). As a simple example of this problem, I have a like button that corresponds to a post. The button appears on TWO different pages and needs to reflect that the user has either liked or not liked the post (liked = true/ liked = false). Here is some example code:
Component instance (auth_like_ids is a list of the posts that the auth user has liked):
<likebutton id="{{ post.id }}" liked="{{ post.id in auth_like_post_ids }}"></likebutton>
Template code:
<template id="like-button-template">
<form method="POST" action="{{ liked ? '/unlikes' : '/likes' }}" @submit.prevent="submitLike">
... [ security token ] ...
<input name="likeable_id" type="hidden" value="{{ id }}">
<button type="submit" class="like_btn btn">
<i class="fa fa-thumbs-up{{ liked ? ' liked' }}"></i>
</button>
</form>
</template>
Simplified JS code:
Vue.component('likebutton', {
template: '#like-button-template',
props: ['id', 'liked'],
data: function() {
return { }
},
methods: {
submitLike: function(e) {
//make AJAX post to submit like
$.ajax({
method: "POST",
url: $(e.target).attr('action'),
data: $(e.target).serialize()
})
.done(function( response ) {
this.liked = !this.liked;
}.bind(this))
.fail(function() {
console.log("An error occurred.");
});
}
}
});
Does anyone know of a way to make live updates persist? I believe this is a very central need for a multi-page Vue application and I can't imagine that having to somehow bypass the browser's cache/ force a page refresh would be the only solution. Other states that also need to be persisted are logged-in state (using an AJAX-only login) and counts like numbers of comments, number of likes per post, etc. Hopefully there is a simple solution I can follow.
Please or to participate in this conversation.