Question

我有几个带有日期选择器的页面。当我选择日期时，我会初始化一个显示此期间数据的图表。当我导航到另一个页面时，datepicker输入在其组件的初始状态中显示。我希望其他页面上的日期选择器记住我之前选择的时间段。我想我需要将它传递给全局状态，但我不确定如何。

这是我的日期选择：

<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

我不确定您是否错过了复制代码的某些部分。

但您希望与“报告”进行互动。在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。

＆＃39; https://caniuse.com/#search=sessionstorage＆＃39;它仍然受到大多数主流Web浏览器的支持;然后设计一个方法，使用适当的Vue生命周期钩子（可能已安装？）在应用程序级别触发，以将持久数据设置为如上所述的vuex模型。

结帐：Save Javascript objects in sessionStorage获取有用信息

Vue.js和vue-datepicker：在全局状态中保存一个选定的句点

1 个答案: