Typescript/Vue - 当我为道具声明默认对象时，如何访问 vuex 存储？

Question

在我的 Vue-Typescript 项目中，我声明了一个名为“data”的道具，并且对于这个道具，我还想将一个对象结构定义为默认值。有些字段是多语言的，为此我需要访问 vuex 商店，它将返回用户已激活的所有活动语言。这允许我动态生成字段。有谁知道我该如何实现这一目标？

export default class CompanyForm extends Vue {

    public dialog = false;

    @Prop({default: {
        name: '',
        address: this.$store.state.Language.data.getLanguageDataStructure(),
        telephone: '',
        fax: '',
        email: '',
        website: ''
    }})
    data: object;
});

Answer 1

您唯一的选择是手动导入 store 并使用它而不是 this.$store，因为在计算 prop 的默认值时组件不会被实例化。

请注意，在创建组件实例之前会验证 props，因此实例属性（例如数据、计算等）在默认或验证器函数中不可用。

（请参阅Vue Props，向上滚动一点以查看警告）

如果您的默认值是对象或数组，您还应该使用函数作为默认值，否则您的所有实例将共享相同的默认值。 （参见Vue Prop Validation，propE 示例）

这样的事情应该可以工作：

import store from 'path/to/your/store';

export default class CompanyForm extends Vue {

    public dialog = false;

    @Prop({default: () => ({
        name: '',
        address: store.state.Language.data.getLanguageDataStructure(),
        telephone: '',
        fax: '',
        email: '',
        website: ''
    })})
    data: object;
});