vue3计算属性set和get方法实现单选全选

<template>
    <!-- 全选全不选 -->
    <input type="checkbox" v-model="checkAll">全选/全不选
    <ul>
        <li v-for="(item,index) in list" :key="index"><input type="checkbox" v-model="checkList[index]">{{item}}</li>
    </ul>

</template>

<script lang='ts' setup>
import { computed } from '@vue/reactivity';
import {ref,reactive, toRefs} from 'vue'
let state = reactive({
    list:["跳跳糖","连衣裙","手机","螺蛳粉","小龙虾"],
    checkList:[true,false,true,false,true]
})

let {list,checkList} = toRefs(state)

let checkAll = computed({
    get(){
        //checkList 如果都是true  return true  只要有一个false  return false 
        return !checkList.value.includes(false)
    },
    set(v){
        console.log(v)
        state.checkList = state.checkList.map(()=>v)
    }
})

</script>

<style lang="less" scoped>

</style>