Vue.js и vue-datepicker: сохранить выбранный период в глобальном состоянии

Question

У меня есть несколько страниц с указателем даты.Когда я выбираю даты, я инициализирую график, показывающий данные за этот период.Когда я перехожу на другую страницу, входные данные средства выбора даты отображаются в их начальном состоянии на этом компоненте.Я хочу, чтобы датчики на других страницах запомнили период, который я выбрал раньше.Я полагаю, мне нужно передать это в глобальное состояние, но я не уверен, как.

Вот мои средства выбора даты:

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

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

Answer 1

Я не уверен, что вы пропустили копирование некоторых частей вашего кода.

Но вы хотите взаимодействовать с глобальным объектом report в хранилище Vuex, вам нужно будет добавить отсутствующую функциональность:

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

Внутри любого компонента вы можете получить доступ к постоянному объекту отчета, используя computed для получения информации через функцию getter:

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

Это означает, что в вашем шаблоне вы можете использовать

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

Чтобы отправить из вашего компонента новые данные, которые будут установлены в глобальном объекте отчета, вам необходимо получить доступ к:

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

Если, с другой стороны, я читаю ваш вопрос с точки зренияобратите внимание, что вся страница обновляется при загрузке другой конечной точки, тогда вы можете заглянуть в sessionStorage.

'https://caniuse.com/#search=sessionstorage' она все еще поддерживается большинством основных веб-браузеров;затем разработайте метод для запуска на уровне приложения, используя соответствующий хук жизненного цикла Vue (может быть, смонтированный?), чтобы установить постоянные данные для модели vuex, как указано выше.

Извлечение: Сохранение объектов Javascript в sessionStorage для полезной информации