Storybook vue composition api,_router of undefined答案

【问题标题】：Storybook vue composition api, _router of undefinedStorybook 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(...) 它可以工作，但我想继续解构我的设置函数。有什么建议吗？

【问题讨论】：

标签： javascript vue.js vue-router storybook vue-composition-api

【解决方案1】：

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

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

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

【讨论】：