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

Question

在我的 Vue-Typescript 项目中，我声明了一个名为“data”的 Prop ，对于这个 Prop ，我还想定义一个默认的对象结构。有些字段是多语言的，为此我需要访问 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

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

Note that props are validated before a component instance is created, so instance properties (e.g. data, computed, etc) will not be available inside default or validator functions.

(请参阅 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;
});