Búsqueda de sitios web

vue.js - Vue 2 + TypeScript: Evitar mutar una Prop directamente - en un componente basado en clase con vue-property-decorator

Quiero poder declarar mi Prop, usando vue-property-decorator, en un componente basado en clases, sin tener que inicializar la propiedad.

Estoy acorralado:

  1. Si no inicializo, TypeScript no compila:

"TS2564 (TS) La propiedad 'parentData' no tiene un inicializador y no se asigna definitivamente en el constructor."

  1. Si inicializo, VueJS lanza una advertencia en tiempo de ejecución:

Evita mutar una prop directamente, ya que el valor se sobrescribirá cada vez que el componente padre se vuelva a renderizar.

Lo que tengo a continuación funciona, pero la advertencia es bastante molesta y también me hace pensar que hay una mejor manera de hacerlo:

import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
import { Client } from '../../../../domainmodels/client';

@Component({})
    export default class SearchLocationsComponent extends Vue {

         @Prop() 
         parentData: Client = new Client();

    }


My dependencies:   
"devDependencies": {
    "@types/webpack-env": "^1.13.0",
    "aspnet-webpack": "^2.0.1",
    "awesome-typescript-loader": "^3.0.0",
    "css-loader": "^0.25.0",
    "event-source-polyfill": "^0.0.7",
    "extract-text-webpack-plugin": "^2.0.0-rc",
    "file-loader": "^0.9.0",
    "style-loader": "^0.13.1",
    "typescript": "^2.2.1",
    "url-loader": "^0.5.7",
    "vue": "^2.2.2",
    "vue-loader": "^11.1.4",
    "vue-property-decorator": "^5.0.1",
    "vue-router": "^2.3.0",
    "vue-template-compiler": "^2.2.2",
    "webpack": "^2.2.0",
    "webpack-cli": "^3.3.2",
    "webpack-hot-middleware": "^2.12.2"   
}

Respuesta #1

Si no está inicializando una propiedad durante la fase de construcción, debe indicar explícitamente que podría ser indefinida:

parentData: Client | undefined;

Para asignar un valor predeterminado a un miembro decorado con @Prop, debes usar el parámetro default del decorador:

@Prop({ default: () => new Client}) 
parentData: Client | undefined;

O, como opción no recomendada, puedes agregar "strictPropertyInitialization": false a las opciones de tu compilador de TypeScript.

Actualización 1:

La solución alternativa más adecuada para tal caso es usar modificadores de aserción de asignación definitiva, introducidos en TypeScript 2.7. Combinarlos con la inicialización predeterminada del decorador Prop debería funcionar:

@Prop({ default: () => new Client }) 
parentData!: Client;

Respuesta #2

tal vez llegue un poco tarde, pero si estás escribiendo Vue en Typescript, puede que quieras usar PropSync en lugar de Prop que vue-property-decorator proporciona.

Entonces, por ejemplo, tienes lo siguiente:

@Prop() propArrayName!: type[];

en su lugar puedes usar:

@PropSync('propArrayName', { type: Array }) _localArrayVariable!: type[];

de esta manera evitas mutar Prop(), pero en su lugar la prop es computed()... puedes leer más aquí:

https://github.com/kaorun343/vue-property-decorator#-propsyncpropname-string-options-propoptions--constructor--constructor---decorator

Artículos relacionados