Vue.js结合vue-datepicker：如何将选中时间段存入全局状态？

看起来你已经找对方向了——用Vuex存储全局的日期选择状态就是解决这个问题的最优方案，我来一步步帮你落地实现：

第一步：更新Vuex模块，添加全局日期状态 #

首先我们要在Vuex的状态里新增存储选中日期的字段，再补充修改这些状态的mutations，方便组件调用：

export default {
  state: {
    report: {
      isLoaded: false,
      data: {},
    },
    // 新增全局日期状态，初始值和你原组件的本地data保持一致
    periodStart: new Date(),
    periodEnd: new Date()
  },
  mutations: {
    // 更新开始日期的mutation
    SET_PERIOD_START(state, date) {
      state.periodStart = date
    },
    // 更新结束日期的mutation
    SET_PERIOD_END(state, date) {
      state.periodEnd = date
    }
  },
  getters: {
    // 封装getter，方便组件快速获取全局日期
    getPeriodStart: state => state.periodStart,
    getPeriodEnd: state => state.periodEnd
  },
  actions: {
    // 保留你原有的loadActiveUsers action逻辑
    loadActiveUsers({ commit }, payload) {
      // 这里是你原本的接口请求逻辑，比如：
      // api.get('/active-users', { params: payload.params })
      //   .then(res => {
      //     commit('UPDATE_REPORT_DATA', res.data)
      //   })
    }
  }
}

第二步：修改Datepicker组件，绑定全局状态 #

原来组件里的periodStart和periodEnd是本地data，现在要换成从Vuex获取。因为v-model不能直接绑定Vuex的state，我们用计算属性来处理双向绑定：

<template>
  ...
  <datepicker 
    v-model="globalPeriodStart" 
    minimum-view="month" 
    format="MMMM yyyy"
  />
  <datepicker 
    v-model="globalPeriodEnd" 
    minimum-view="month" 
    format="MMMM yyyy"
  />
  ...
</template>

<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
import moment from 'moment'

export default {
  // 移除原来data里的periodStart和periodEnd
  computed: {
    ...mapGetters(['getPeriodStart', 'getPeriodEnd']),
    // 处理开始日期的v-model双向绑定
    globalPeriodStart: {
      get() {
        return this.getPeriodStart
      },
      set(newDate) {
        this.SET_PERIOD_START(newDate)
      }
    },
    // 处理结束日期的v-model双向绑定
    globalPeriodEnd: {
      get() {
        return this.getPeriodEnd
      },
      set(newDate) {
        this.SET_PERIOD_END(newDate)
      }
    }
  },
  methods: {
    ...mapMutations(['SET_PERIOD_START', 'SET_PERIOD_END']),
    ...mapActions(['loadActiveUsers']),
    report() {
      // 现在使用全局的日期参数发起请求
      this.loadActiveUsers({
        params: {
          start_date: moment(this.getPeriodStart).startOf('month').format('YYYY-MM-DD'),
          end_date: moment(this.getPeriodEnd).endOf('month').format('YYYY-MM-DD'),
        }
      })
    }
  },
  // 可选：组件挂载时自动加载初始数据
  mounted() {
    this.report()
  }
}
</script>

第三步：其他页面复用逻辑 #

其他使用datepicker的页面，只需要复制上述组件里的计算属性、mapGetters/mapMutations/mapActions相关逻辑，就能自动同步全局的日期状态——不管切换到哪个页面，datepicker都会显示上次选中的时间段。

额外优化：持久化状态（可选） #

如果希望页面刷新后也能保留选中的日期，可以使用vuex-persistedstate插件，它能自动把Vuex的状态存入localStorage/sessionStorage，刷新页面不会丢失数据。

内容的提问来源于stack exchange，提问作者Olga B