uni.app点击按钮实现全选全不选 单选

state: {
		list: [{
				checked: false,
				id: 11,
				title: "商品标题111",
				cover: "/static/images/demo/list/1.jpg",
				},	
			  {
				checked: false,
				id: 12,
				title: "商品222",
				cover: "/static/images/demo/list/1.jpg",
				},
			 {
				checked: false,
				id: 13,
				title: "商品333",
				cover: "/static/images/demo/list/1.jpg",
				}
		],
		selectedAll: [] //存放选中ID
	},

用vuex，在js中自己模拟一个列表数据，定义一个空的数组selectedAll，实现全选全不选要把checked全部改成true或者false，如果为true，把list里面id全部存入selectedAll中，如果为false，就把selectedAll变为空数组

mutations: {
		//全选
		selectAll(state){
			state.selectedAll=state.list.map(v=>{
				v.checked = true
				return v.id
			})
		},
		//全不选
		unselectAll(state){
			state.selectedAll=[]
			state.list.map(v=>{
				v.checked = false
			})
		}
	},

全部选中或者不全选中时，如果selectedAll长度与list长度相等时就全选（用前面存入的id进行长度判断）

getters: {
          checkedAll(state){
			  return state.selectedAll.length==state.list.length
		  }
	}

在actions中用三元表达式进行判断

actions: {
          docheckedAll(context){
			  context.getters.checkedAll? context.commit('unselectAll'): context.commit('selectAll')
		  }
	}

在要点击的页面中

<label @click="docheckedAll">
		<radio :checked="checkedAll"></radio>
</label>

引入vuex

	import {mapState,mapActions,mapGetters} from 'vuex'
computed:{
			...mapState({ list:state=>state.cart.list}),
			...mapGetters(['checkedAll'])
		},
methods: {
			...mapActions(['docheckedAll'])
		},

单选按钮实现   给单选按钮添加一个点击事件selectItem，并且添加一个鼠标点击的索引

<view v-for="(item,index) in list" :key="index">
		<label @click="selectItem(index)">
				<radio :checked="item.checked" />
		</label>
<view >
			
methods: {
			...mapMutations(['selectItem'])	,
			...mapActions(['docheckedAll'])
		},	

在js页面  定义一个i，判断selectedAll中是否含有id,如果有就把里面的checked改为false，删除这个i,反之则改为true

	
//单选
  mutations:{
       selectItem(state,index){
			let id = state.list[index].id
			let i = state.selectedAll.indexOf(id)
			if(i!==-1){
				state.list[index].checked=false
				state.selectedAll.splice(i,1)
			}else{
				state.list[index].checked=true
				state.selectedAll.push(id)
			}
		},
    }