javascript - Storybook vue composition api,_router of undefined

Question

我尝试使用 vue-composition-api 渲染带有故事书 (vue-cli conf) 的组件，但出现以下错误:

错误:无法读取未定义的属性“_router”

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 app 上设置的所有插件都属于组件的 parent。所以你应该将它们绑定(bind)到组件本身。

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

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