Fechas en Vuejs 2 y Vuex utilizando Moment

La mayoría de las veces el trabajo con fechas nos hace perder bastante tiempo, no es un trabajo sencillo, por ese motivo en este tutorial te voy a explicar cómo trabajar con fechas en Vuejs 2 y Vuex utilizando Moment.

Lo primero que debes instalar y configurar en tu proyecto es Vuex y Moment. yarn add vuex moment Una vez instalado y configurado, vamos a crear un módulo para manejar fechas con Vuex.

const moment = require('moment');

const state = {
    start_date: moment(new Date()).local().format('YYYY-MM-DDTHH:mm'),
    end_date: moment().add(30, 'days').local().format('YYYY-MM-DDTHH:mm'),
};

const mutations = {
    SET_START_DATE: (state, value) => {
        state.start_date = value;
    },
    SET_END_DATE: (state, value) => {
        state.end_date = value;
    },
};

const getters = {
    differenceDate (state) {
        const start = moment(state.start_date);
        const end = moment(state.end_date);
        return end.diff(start, 'days');
    }
};

export default {
    state,
    mutations,
    getters
}

Simple, definimos start_date y end_date dentro del estado, un par de mutaciones para modificar estos datos y finalmente un getter para obtener la diferencia entre ambas fechas.

Para que nuestro módulo funcione recuerda crear la store y añadirla a tu app.

import Vuex from 'vuex';
Vue.use(Vuex);
import DateModule from './modules/date.module';
const store = new Vuex.Store({
    modules: {
        DateModule
    }
});

new Vue({
  router,
  store, //aquí
  render: h => h(App)
}).$mount('#app')

Para utilizar todo lo que hemos hecho dentro de un componente es muy simple, haciendo uso de computed, mapGetters y setters y getters podemos tenerlo todo controlado con poco código.

<template>
    <div id="date-component">
        <form>
            <label>Start</label>
            <input
                type="datetime-local"
                name="start_date"
                v-model="start_date"
            />
            <label>End</label>
            <input
                type="datetime-local"
                name="end_date"
                v-model="end_date"
            />

            <p>Diferencia en días: {{ differenceDate }}</p>
        </form>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex';
    export default {
        name: 'date-component',
        computed: {
            ...mapGetters(['differenceDate']),
            start_date: {
                get () {
                    return this.$store.state.DateModule.start_date;
                },
                set (value) {
                    this.$store.commit('SET_START_DATE', value);
                }
            },
            end_date: {
                get () {
                    return this.$store.state.DateModule.end_date;
                },
                set (value) {
                    this.$store.commit('SET_END_DATE', value);
                }
            }
        }
    }
</script>

<style scoped>
    #date-component * {
        font-size: 25px;
    }
</style>