时间戳

首页 > 解决方案 > 无法读取未定义的属性“移动”-Vue/Vuetify/Storybook

javascript - 无法读取未定义的属性“移动”-Vue/Vuetify/Storybook

问题描述

我在使用 vue 和 vuetify 渲染我的故事书故事中的“画布”屏幕时遇到问题。我有其他组件工作正常，但这个没有。似乎我的故事无法识别 vuetify 的这种“移动”属性。另外，我没有找到确切的位置，也没有找到为什么只在这个组件中调用这个属性，我试图从组件中删除所有与移动相关的 scss，但没有成功。

它显示以下错误：

TypeError: Cannot read property 'mobile' of undefined
    at VueComponent.isMobile (http://localhost:6006/vendors~main.68bb2399de94b0c69072.bundle.js:289475:23)
    at Watcher.get (http://localhost:6006/vendors~main.68bb2399de94b0c69072.bundle.js:243936:25)
    at Watcher.evaluate (http://localhost:6006/vendors~main.68bb2399de94b0c69072.bundle.js:244041:21)
    at VueComponent.computedGetter [as isMobile] (http://localhost:6006/vendors~main.68bb2399de94b0c69072.bundle.js:244291:17)
    at VueComponent.genHeaders (http://localhost:6006/vendors~main.68bb2399de94b0c69072.bundle.js:262289:24)
    at VueComponent.genDefaultScopedSlot (http://localhost:6006/vendors~main.68bb2399de94b0c69072.bundle.js:262621:178)
    at Object.normalized [as default] (http://localhost:6006/vendors~main.68bb2399de94b0c69072.bundle.js:242050:37)
    at Proxy.render (http://localhost:6006/vendors~main.68bb2399de94b0c69072.bundle.js:261032:66)
    at VueComponent.Vue._render (http://localhost:6006/vendors~main.68bb2399de94b0c69072.bundle.js:243005:22)
    at VueComponent.updateComponent (http://localhost:6006/vendors~main.68bb2399de94b0c69072.bundle.js:243523:21)

如果我切换到“文档”屏幕并重新加载它呈现的页面。

故事书配置：

// main.js
const path = require('path');

module.exports = {
  "stories": [
    "../docs/**/*.stories.mdx",
    "../docs/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  webpackFinal: async (config, { configType }) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      "~": path.resolve(__dirname, "../"),
      "@components": path.resolve(__dirname, "../src/components"),
    };
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        'style-loader', 
        'css-loader',
        {
          loader: 'sass-loader',
          options: {
            additionalData: `
            @import "_variables";
            @import "_globals";
            @import "_main";
            `,
            sassOptions: {
              includePaths: ['src/assets/scss'],
            }
          },
        } 
      ],
      include: path.resolve(__dirname, '../'),
    });
    return config;
  }
}

// Preview.js

import { addDecorator } from '@storybook/vue';
import vuetify from './vuetify_storybook';     

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
}

addDecorator(() => ({
  vuetify,
  template: `
  <v-app style="height: 200px">
    <story/>
  </v-app>
  `
}))

// vuetify__storybook.js

import Vue from 'vue';
import Vuetify from 'vuetify';
import config from '../docs/plugins/vuetify.js';

Vue.use(Vuetify);

export default new Vuetify(config);

// vuetify.js (plugins/)

import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
import '@mdi/font/css/materialdesignicons.css';

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: '#5C068C',
        secondary: '#8345A5',
        accent: '#82B1FF',
        error: '#FF5252',
        info: '#2196F3',
        success: '#4CAF50',
        warning: '#FFC107'
      },
    },
  },
  icons: {
    iconfont: 'mdi',
  },
});

标签： javascriptvue.jsvuetify.jsstorybook

解决方案

经过数周的艰苦试验和错误，这是一个可行的解决方法：

在 .stories.js（或 .ts）文件的顶部，添加以下行：

import vuetify from '@/plugins/vuetify' // or where-ever your Vuetify is initialized

然后当你声明你的故事书模板时，传入你的 vuetify 对象

const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { YourComponent },
  vuetify, // <-- Very important line
  template: `
  <v-app> <!-- and wrap your component with v-app -->
    <YourComponent />
  </v-app>
  `
})

运行你的故事，它应该可以工作

推荐阅读