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

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

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

但是您想与 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
        }
    }
}

在任何组件内部，您都可以使用计算方法通过 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

如果另一方面，我从加载不同端点时整个页面刷新的 Angular 阅读您的问题，那么您可以查看 sessionStorage。

'https://caniuse.com/#search=sessionstorage ' 大多数主要网络浏览器仍然支持它；然后设计一个方法，使用适当的 Vue 生命周期 Hook (可能已安装？)在应用程序级别触发，以将持久数据设置为上述 vuex 模型。

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