vue class 组件继承，方法来自 base class "is not a function"

Question

我正在尝试 class inheritance to avoid code redundancy when defining stories for storybook because I have a bunch of scenarios (stories) to cover with less/more data similarities. I'm using a vue-class-component approach with vue-property-decorator 定义组件。

这是一个例子：

//myStory.stories.ts file
import Vue from 'vue'
import {Component} from 'vue-property-decorator'
import {store} from 'path/to/stores'
import Vuex from 'vuex'

const BaseOptions = {
  components: {Component1, Component2},
  template: MyTemplate,
  store: new Vuex.Store<IRootState>(store)
}

class BaseClass extends Vue {
  public method1() {
    console.log("call from method 1")
  }
  // I want to customize many methods here in BaseClass: method2, method3, etc
}

// Story book page
export default {
  title: 'My/Page',
  // Our exports that end in "Data" are not stories.
  excludeStories: /.*Data$/,
}

// Defining storybook stories:
export const ScenarioOne = () => (
  @Component<any>(
    {
      ...BaseOptions,
      mounted() {
        this.method1()
      },
    }
  )
  class CurrentClass extends BaseClass {} // This isn't working >> error: _this4.method1 is not a function
)


export const ScenarioTwo = () => (
  @Component<any>(
    {
      ...BaseOptions,
      mounted() {
        this.method1()
      },
    }
  )
  class CurrentClass extends BaseClass {
    // If I redefine the method1(), it's working
    public method1() {
       console.log("call from method 1 (redefined)")
    }
  }
)

为什么我的 scenarioOne 不能调用 method1() 而 scenarioTwo 可以？

Answer 1

您还必须将基础 class 定义为 @Component({})，以及继承链中的所有 classes，因此：

import Vue from "vue";
import Component from "vue-class-component";

@Component({})
class BaseClass extends Vue {
}

@Component({})
class SubClass extends BaseClass {
}

vue class 组件继承，方法来自 base class "is not a function"

vue class component inheritance, method from base class "is not a function"

inheritance

typescript

vuejs2

storybook

vue-class-components