如何在asyncData中访问Vue.prototype？

Question

在插件中，我给Vue prototype添加了新的属性。

import Vue from 'vue';
import { DateTime } from 'luxon';

Object.defineProperty(Vue.prototype, '$DateTime', { value: DateTime });

我想在asyncData中使用它，如何获取访问权限？

async asyncData(context) {
  context.store.commit('calendar/setSelectDate', $DateTime.now());
}

Answer 1

我不确定defineProperty是不是合适的选择。您也许可以检查Vue实例本身，看看它上是否有一些$DateTime，如果有，context.$DateTime应该可以做到这一点。

如果它不能与context.$DateTime一起工作，那么为了调试的目的，也许可以在您的组件通过单击按钮将其挂载到常规的this.$DateTime中时进行尝试。

使用常规的Nuxt plugins甚至是inject是一种更干净、更实用的方法。

import { DateTime } from 'luxon'
export default ({ app }, inject) => {
  inject('DateTime', DateTime)
}

然后

async asyncData({ store, $DateTime }) {
  store.commit('calendar/setSelectDate', $DateTime.now())
}

或来自组件/页面

this.$DateTime.now()

说到Vue，你不会想使用vue-luxon的。看起来是一种简单快捷的使用库的方法。是因为它已经7个月没有保管期了，还是别的什么？

Answer 2

import Vue from 'vue';
async asyncData(context) {
  context.store.commit('calendar/setSelectDate', Vue.prototype.$DateTime.now());
}