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

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: {},
   },
 },
},
...

How about using cookies http://live24u.com/how-to-create-access-and-delete-cookies-in-vuejs/ — boateng, May 23 '18 at 13:42
No, I believe that there is another solution. Like tracking change in my v-model and pass this to the global state. I just don't know how to implement this. — Olga B, May 23 '18 at 13:47

John · Accepted Answer · 2018-05-23T14:30:09.160

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

Nice, here’s also the theory behind state (as opposed to session) management in Vue https://codeburst.io/state-management-with-vuex-6a3d83b0a799 — boateng, May 23 '18 at 14:52

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

1 Answers1

Linked