Question

我尝试使用vue-composition-api使用Storybook（vue-cli conf）渲染组件，但出现以下错误：

Error: Cannot read property '_router' of undefined

file.stories.ts的代码如下，

import Vue from 'vue'
import CompositionApi from '@vue/composition-api'
import VueRouter from 'vue-router'

import { storiesOf } from '@storybook/vue'
import Login from '@/ui/views/Login/Login.vue'
import StoryRouter from 'storybook-vue-router'

Vue.use(CompositionApi)
Vue.use(VueRouter)

storiesOf('Components', module)
  .addDecorator(StoryRouter())
  .add('Login', () => ({
    components: { Login },
    template: '<Login/>',
  }))

和file.vue的代码在下面给出

<template>
... 
</template>

export default defineComponent({
  name: 'Login',
  setup(props, { root: { $router } }) {

    function redirectTo() {
       $router.push({ name: 'Home' })
    }

    return {
       redirectTo,
    }

  },
})

如果我先写setup(props, { root })，然后再写root.$router(...)，则它可以工作，但是我想继续破坏我的设置功能。有什么建议我该怎么做吗？

Answer 1

在storybook、router、vuetify.. Vue 应用程序上设置的所有插件都属于组件的parent。所以你应该将它们绑定到组件本身。

你可以像这样扩展一个组件

const extendedComponent = Vue.component(
  componentName,
  {
    extends: component.default || component,
    router,
    vuetify
  }
)

故事书vue合成api，未定义_router

1 个答案: