为什么我可以在 vuex 操作中使用 dayJS 但不能在 Vuex 存储中初始化状态？

Question

我正在尝试使用 NuxtJS dayjs 模块将初始月份设置为状态中的当前月份。

为什么我可以在动作中使用 this.$dayjs 而不能在状态中使用？它不应该是全球可访问的吗？

我如何初始化状态中的当前月份？

export const state = () => ({
  month: this.$dayjs().startOf('month'), //THIS LINE DOESNT WORK
})
export const mutations = { }
export const actions = {
  bindOngepland: firestoreAction(function ({ bindFirestoreRef, rootState }) {
    const month = this.$dayjs().startOf('month') // THIS LINE DOES WORK
    const nextMonth = state.month.add(1, 'month')
  }),
  setNextMonth({  }) {
  },
}

在这个简化的示例中，第 2 行出现 undefined 错误。this 似乎是 undefined。

Answer 1

state 是在创建应用程序实例时设置的，因此尚未定义 Nuxt 实例。并且 this 在 bindOngepland 操作中“有效”（即，是您的 Nuxt 实例），因为它是一个 常规函数 ，其上下文在被调用时绑定。

解决方法是让组件调用初始化状态的操作。在通用模式下（或自动调用初始化状态的ssr: true), the store can provide a nuxtServerInit action：

// store/index.js
export const actions = {
  nuxtServerInit({ commit }) {
    commit('SET_MONTH', this.$dayjs().startOf('month'))
  }
}

export const mutations = {
  SET_MONTH(state, value) {
    state.month = value
  }
}

在 SPA 模式 (ssr: false) 中，您必须显式分派操作：

// store/index.js
export const actions = {
  init({ commit }) {
    commit('SET_MONTH', this.$dayjs().startOf('month'))
  }
}

export const mutations = {
  SET_MONTH(state, value) {
    state.month = value
  }
}

// MyComponent.vue
export default {
  mounted() {
    this.$store.dispatch('init')
  }
}

为什么我可以在 vuex 操作中使用 dayJS 但不能在 Vuex 存储中初始化状态？

Why can I use dayJS in vuex actions but not to initialize states in a Vuex store?

state

vuex

nuxt.js

dayjs