uniapp 学习笔记二十三 实现单选和全选功能(使用mapGetter和mapMutation)

uniapp 学习笔记二十三 实现单选和全选功能(使用mapGetter和mapMutation)

cart.js

export default {
    namespaced:true,
    state(){
        return {
            cartList:[{
                id:"10090",
                twoId:10089,
                name:"拿破仑草莓恋爱",
                french:"Napoleon aux fraises",
                price:"218.00",
                isCheck:false,
                img:"@static/logo.png"
            },{
                id:"10090",
                twoId:10089,
                name:"拿破仑草莓恋爱",
                french:"Napoleon aux fraises",
                price:"218.00",
                tid:11,
                tname:'限定',
                isCheck:false,
                img:"@static/logo.png"
            }
            ]
        }
    },
    getters:{
        allInfo(state){
            let allCheck = true
            state.cartList.forEach(item=>{
                if(!item.isCheck){
                    allCheck = false
                }
            })
            return {allCheck}
        }
    },
    mutations:{
        cartCheckMut(state,idx){ // 单选
            state.cartList[idx].isCheck = !state.cartList[idx].isCheck
        },
        cartAllCheckMut(state,bool){ // 全选 bool 是原本的全选状态
            state.cartList.forEach(item=>{
                item.isCheck = !bool
            })
        }
    }
}

cart.vue

<template>
	<view>
		<view class="flex padding" v-for="(item,index) in cartList">
			<view class="flex align-center">
				<text @click="handleCheck(index)" :class="['iconfont','icon-youxiajiaogouxuan','margin-right',{'yellow':item.isCheck}]"></text>
				<image class="poster margin-right" src="../../static/logo.png" mode=""></image>
			</view>
			<view class="flex justify-between info">
				<view class="">
					草莓蛋糕
					<view class="margin-tb-xs">	Caomei	</view>
					Y147.0
				</view>
				<view class="flex flex-direction align-end">
					<view class="edit margin-bottom-xs">
						<text class="iconfont icon-bianjishuru"></text>
					</view>
					1磅(450g) X 1
				</view>
			</view>
		</view>
		<view class="fixed bg-fff flex">
			<view class="flex flex-sub padding align-center">
				<text 
                @click="handleAllCheck(allInfo.allCheck)" 
                :class="['iconfont', 'icon-youxiajiaogouxuan', 'margin-right-xs',{'yellow':allInfo.allCheck}]"></text>
				全选
				<view class="margin-left">
					共计:189
				</view>
			</view>
			<view class="bg-yellow padding text-center color-fff">
				立即结算
			</view>
		</view>
	</view>
</template>

<script>
    import {mapState,mapMutations,mapGetters} from 'vuex'
	export default {
		data() {
			return {
				
			}
		},
        computed: {
            ...mapState({
                cartList:state=>state.cart.cartList 
            }),
            ...mapGetters({
                allInfo:'cart/allInfo'
            })
        },
        methods:{
            ...mapMutations({
                handleCheck:'cart/cartCheckMut',
                handleAllCheck:'cart/cartAllCheckMut'                
            })
        }
	}
</script>

<style lang="scss">
page{
	padding-bottom: 100upx;
}
.poster{
	width: 180upx;
	height: 180upx;
	background-color: #d8d8d8;
}
.info{
	width: 60%;
	.edit{
		width: 80upx;
		height: 80upx;
		text-align: center;
		line-height: 80upx;
		background-color: #e6e6e6;
		border-radius: 50%;
	}
}
.icon-youxiajiaogouxuan{
	width: 50upx;
	height: 50upx;
	text-align: center;
	line-height: 50upx;
	background-color: #e6e6e6;
	border-radius: 20%;
}
.fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-shadow: 0 0 10upx 2upx rgba(0, 0, 0, 0.2);
}

.yellow{
	background-color: yellow;
}

</style>

index.js

import Vue from "vue"
import Vuex from "vuex"
import count from './count.js'
import condition from './condition.js'
import user from './user.js'
import cart from './cart.js'
Vue.use(Vuex)
const store = new Vuex.Store({
    // 定义状态对象
    // state:{
    //     num:100
    // }
    modules:{
        count,
        condition,
        user,
        cart
    }
})
export default store

main.js

import App from './App'
import store from 'store/index.js' //引入自定义的store

// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App,
    store  //注入状态机
})

// 全局引入uView主JS库
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)

// 全局引入自定义组件
import NavCustom from '@/components/nav-custom.vue'
Vue.component('nav-custom',NavCustom)

import HomeTitle from '@/components/home-title.vue'
Vue.component('home-title',HomeTitle)

import GoodItem from '@/components/goods-item.vue'
Vue.component('good-item',GoodItem)

// 挂载全局异步请求方法(单个挂载)
/* import {$http,$get,$post,$put} from '@/utils/request.js'
Vue.prototype.$http = $http
Vue.prototype.$get = $get
Vue.prototype.$post = $post
Vue.prototype.$put = $put */

// 挂载全局异步请求方法(批量挂载request.js里面的所有方法)
import * as request from '@/utils/request.js'
for (let key in request) {
    Vue.prototype[key] = request[key]
}


app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
import { from } from 'form-data'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}
// #endif