在为故事书定义故事时,我正在尝试进行类继承以避免代码冗余,因为我有一堆场景(故事)来涵盖更少/更多的数据相似性。我正在使用带有vue-property-decorator的 vue-class-component 方法来定义组件。
这是一个例子:
//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()
whilescenarioTwo
可以?