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

港控/mmm° 2024-04-07 14:11 22阅读 0赞

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

![be62319230744af9b5540661eb28affc.png][]

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

[be62319230744af9b5540661eb28affc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/22c443cff54449f7bf4c3a4a367b9cfd.png