Vue3响应式高阶用法之shallowReadonly()使用

<script lang="ts" setup>
import { shallowReadonly } from 'vue';

const state = {
  name: '天天鸭',
  profile: {
    age: 18,
    address: {
      city: '广州',
    }
  }
};
const shallowState = shallowReadonly(state);

// 这将会抛出错误，因为顶层属性是只读的
shallowState.name = 'change天天鸭';

// 这是可以的，因为 `profile` 对象没有被设为只读
shallowState.profile.age = 31; 

// 同样，`address` 对象也可以被修改
shallowState.profile.address.city = '深圳';
</script>

shallowState.name = 'change天天鸭'; // 抛出错误

shallowState.profile.age = 31; // 正常修改
shallowState.profile.address.city = '深圳'; // 正常修改

const config = shallowReadonly({
  apiEndpoint: 'https://api.example.com',
  timeout: 5000,
  options: {
    retry: true,
    retryCount: 3
  }
});

// 顶层属性不可修改
config.apiEndpoint = 'https://api.newexample.com'; // 抛出错误

// 内部属性可修改
config.options.retry = false; // 正常修改

const formData = shallowReadonly({
  fields: [
    { name: 'username', value: '' },
    { name: 'email', value: '' }
  ]
});

// 顶层属性不可修改
formData.fields = []; // 抛出错误

// 内部属性可修改
formData.fields[0].value = 'newUsername'; // 正常修改