I am facing an issue with my datepickers on multiple pages. Every time I choose a date range and navigate to another page, the datepicker inputs reset to their initial state. How can I make the datepickers remember the period I chose across different pages? I think I need to store this information in the global state, but I'm unsure of how to do it.
My datepickers look like this:
<template>
...
<datepicker v-model="periodStart"
minimum-view="month"
format="MMMM yyyy"/>
<datepicker v-model="periodEnd"
minimum-view="month"
format="MMMM yyyy"/>
...
<template>
<script>
...
data() {
return {
periodStart: new Date(),
periodEnd: new Date(),
};
},
methods: {
...mapActions(['loadActiveUsers']),
report() {
this.loadActiveUsers({ params: {
start_date: moment(this.periodStart).startOf('month').format('YYYY-MM-DD'),
end_date: moment(this.periodEnd).endOf('month').format('YYYY-MM-DD'),
}
});
},
},
...
<script>
Here is the Vuex module:
export default {
state: {
report: {
isLoaded: false,
data: {},
},
},
},
...