Storybook vue composition api,_router of undefined

Posted 2023-02-22

【中文标题】Storybook vue composition api,_router of undefined

【英文标题】：Storybook vue composition api, _router of undefined

【发布时间】：2021-01-08 17:17:41

【问题描述】：

我尝试使用 vue-composition-api 渲染带有故事书 (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(...) 它可以工作，但我想继续解构我的设置函数。有什么建议吗？

【参考方案1】：

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

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

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