dayjs object and fetch about dayjs-module HOT 2 CLOSED

jb-alvarado commented on May 29, 2024

dayjs object and fetch

from dayjs-module.

Comments (2)

potato4d commented on May 29, 2024 2

@jb-alvarado

when I use fetch for creating a dayjs object, I can not access it later in a component.

Nuxt.js uses window.__NUXT__ for universal behavior between SSR / SPA.
This is limited to POJOs (Plain Old JavaScript Objects) and not POJOs, as Day.js objects have functions.

Therefore, the following code is the correct code.

// store/index.js

export const state = () => ({
  dateTime: null
});

export const mutations = {
  SET_DATE_TIME(state, obj) {
    state.dateTime = obj;
  }
};

export const actions = {
  setDateTime({ commit, state, $dayjs }) {
    commit("SET_DATE_TIME", this.$dayjs().format()); // to ISO8601 string
    console.log(state.dateTime);
  }
};

<template>
  <!-- pages/index.vue -->
  <section>
    <div>
      <h2>{{ $dayjs(dateTime).format("YYYY-MM-DD") }}</h2>
    </div>
  </section>
</template>

<script>
import { mapState } from "vuex";

export default {
  async fetch({ store }) {
    await store.dispatch("setDateTime");
  },

  computed: {
    ...mapState(["dateTime"]),
  },
};
</script>

<style scoped>
.title {
  font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display: block;
  font-weight: 400;
  font-size: 100px;
  color: #2E495E;
  letter-spacing: 1px;
  font-size: 6em;
}
.green {
  color: #00C48D;
}

.subtitle {
  font-weight: 300;
  font-size: 3em;
  color: #2E495E;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}
</style>