Vue 3 Composition API 带有对象和类型的脚本设置 "ref"

Question

我正在从 Vue2 迁移到 Vue3，但无法将一些对象转移到新的 ref method。

如何使用带类型的 ref 编写此代码？我做了一些研究，但找不到太多。

 data() {
    return {
      isDeleteEnabled: true,
      contractSet: {
        contract: {
          id: null,
          name:''
          is_deleted: null,
          created_datetime: '',
        },
        services: [
          {
            id: null,
            name: '',
            is_disabled: null,
            is_deleted: null,
          },
        ],
      } as ContractSetsType,
    };
  },

像这样开始但它给出了类型错误：（没有重载匹配此调用）

    let isDeleteEnabled= ref<boolean>(false); // This works fine

    // This gives type error
    let contractSet = ref<ContractSetsType>({
    contract: {
              id: null,
            },
    });

我的 ContractSetsType：

 export interface ContractSetsType {
        /**
         * 
         * @type {Contract}
         * @memberof ContractSetsType
         */
        contract?: Contract;
    }
    
    export interface Contract {
        /**
         * 契約id
         * @type {number}
         * @memberof Contract
         */
        id: number;
    
        /**
         * 契約名
         * @type {string}
         * @memberof Contract
         */
        name: string;
    
        /**
         * 削除済フラグ
         * @type {boolean}
         * @memberof Contract
         */
        is_deleted: boolean;
    
        /**
         * 作成日時
         * @type {string}
         * @memberof Contract
         */
        created_datetime: string;
    }

我应该使用 reactive 而不是 ref 吗？

Answer 1

您的 ContractSetsType 与下面不同。

{
    contract: {
        id: null    
    }
}

您必须匹配类型：

//below works fine
let contractSet = ref<ContractSetsType>({
    contract: {
        id: 12,
        name: "my name",
        is_deleted: false,
        created_datetime: "timestamp string"
    }
})

let contractSet0 = ref<ContractSetsType>({
})

// below doesn't work
let contractSet1 = ref<ContractSetsType>({
    contract: {
        id: 12,
        name: "my name",
    }
})

let contractSet2 = ref<ContractSetsType>({
    contract: {
        id: 12,
    }
})

let contractSet3 = ref<ContractSetsType>({
    contract: {
        id: null
    }
})

如果你愿意

let contractSet = ref<ContractSetsType>({
    contract: {
        id: null
    }
})

要工作，您可以更改 interface Contract 以将所有内容设为可选。

Vue 3 Composition API 带有对象和类型的脚本设置 "ref"

Vue 3 Composition API Script Setup "ref" with object and types

vuejs3

vue-composition-api

vue-script-setup