Vue.js and vue-datepicker: save a picked period in

Question

I have several pages with a datepicker. When I choose dates, I initialise a chart showing data from this period. When I navigate to another page, datepicker inputs are shown in their initial state on this component. I want the datepickers on other pages remember a period which I chose before. I suppose I need to pass this to the global state but I am not sure how.

Here is my datepickers:

<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>

Vuex module:

export default {
 state: {
  report: {
    isLoaded: false,
    data: {},
   },
 },
},
...

Answer 1

I am unsure if you have missed copying some parts of your code.

But you want to interact with the 'report' global object in the Vuex store, you will need to add the missing functionality:

export default {
    state: {
        report: {
            isLoaded: false,
            data: {},
        },
    },
    actions: {
        setData(context, arr) {
            context.commit('saveData', arr) //the commit method calls the mutator method and sends through the pay load sent into the function from the outside world (see below)
        }
    },
    mutations: {
        saveData(state, val) {
            state.report = val //<access the object here and set your data as needed
        }
    },
    getters: {
        getReport(state) {
            return state.report //return the persisting report variable
        }
    }
}

Inside of any component you can access the persisting report object by using computed to get info through the getter function by:

computed: {
            report() {
                return this.$store.getters.getReport
            },
}

This means in your template you can use

{{report}} //points to the computer reported() returned value

To send from your component new data to be set in the global report object you need to access:

this.$store.dispatch('setData', data) //Where dispatch->setData is the action being called in the vuex code

If on the other hand I am reading your question from the point of view that the entire page is refreshed when loading a different end point then you could look into sessionStorage.

'https://caniuse.com/#search=sessionstorage' it is still supported by most major web browsers; then engineer a method to fire at the app level using a appropriate Vue lifecycle hook (maybe mounted?) to set the persisting data to the vuex model as above.

Checkout: Save Javascript objects in sessionStorage for useful information