Question

我正尝试在Storybook中使用Vuetify进行服装设置。 .Storybook / config.js看起来像：

import { configure, addDecorator } from '@storybook/vue';
import 'vuetify/dist/vuetify.css';

import Vue from 'vue';
import Vuetify from 'vuetify';

Vue.use(Vuetify, {
  theme: {
      dark: {
        primaryTypColor: '#232B2B',
        productCardTitle: '#7E7F80'
      },
      light: {
        primaryTypColor: '#232B2B',
        productCardTitle: '#7E7F80'
      },

   },
});

addDecorator(() => ({
 template: '<v-app><story/></v-app>',
}));

configure(require.context('../stories', true, /\.stories\.js$/), module);

我遇到了错误：undefined不是一个对象（评估'this。$ vuetify.theme.dark'），为什么呢？

Answer 1

这是因为您尚未在Vue.js上下文中注入全局vuetify对象。您可以使用装饰器来实现。

在您的示例中，您似乎只需要将导入的Vuetify作为参数添加到addDecorator函数中即可。

6以下版本的故事书的完整示例，方法如下：

import Vue from 'vue';
import vuetify from '@plugins/vuetify'

Vue.use(vuetify)

addDecorator(() => ({
 template: '<v-app><story/></v-app>',
 vuetify,
}));

对于故事书版本6：

import vuetify from '@plugins/vuetify'
import Vue from 'vue'
Vue.use(vuetify)

export const decorators = [
  () => ({
    template: '<v-app><story/></v-app>',
    vuetify
  }),
]

故事书中的Vuetify出现错误：undefined不是对象（评估'this。$ vuetify.theme.dark'）

1 个答案: