Funcția readonly() în Vue 3 în Vue.js & Nuxt

Ce este funcția readonly() în Vue 3

Funcția readonly() primește un obiect (simplu sau reactiv) ori un ref() și returnează un proxy protejat împotriva modificărilor. Orice încercare de a atribui valori proprietăților sale va eșua (declanșând un avertisment în mediul de dezvoltare), asigurând integritatea stării.

Este extrem de utilă atunci când expuneți starea internă dintr-un composable sau prin provide(), permițând componentelor copil să citească starea fără a o putea altera direct.

<script setup>
import { reactive, readonly } from 'vue';

const stareOriginala = reactive({ contor: 0 });
const stareProtejata = readonly(stareOriginala);

function incrementeaza() {
    stareOriginala.contor++; // Permis și reactiv
    // stareProtejata.contor++; // Va genera eroare/warning în consolă: Set operation failed: target is readonly
}
</script>