uniapp 学习笔记十七 vuex的模块化拆分,state和mutations结合实践

迷南。 2024-04-07 10:13 61阅读 0赞

![c9f06bfc6f474ca3b5e37e6bb53d41ef.png][]

通过状态机来设置查询条件对象

通过mutationgs来改变状态机对象的值

cake.vue

<template>
        <view>
            <nav-custom></nav-custom>
            <view class="cont">
                <good-item v-for="(item,index) in glist" :gdata="item"></good-item>
            </view>
            <view class="fixed flex justify-center bg-fff padding-sm">
                <view v-for="(item,index) in tabArr" :key="index" @tap="handleTab(item)"
                    class="flex justify-around align-center">
                    <view class="">{
       {item.name}}</view>
                    <u-line v-if="index<tabArr.length-1" direction="col" length="15" margin="30upx"></u-line>
                </view>
            </view>
            <u-popup :show="show" mode="left" @close="handleClose">
                <view class="pop-cont">
                    <view v-for="(item,index) in cfylist" class="padding-sm u-border-bottom">
                        {
       {item.bname}}
                        <view v-if="index==0">
                            <view @tap="listShow=!listShow" class="padding-tb-sm u-border-top margin-top">
                                口味筛选
                            </view>
                            <u-cell-group v-if="listShow">
                                <u-cell v-for="(itm,idx) in item.list" :title="itm.tname" isLink></u-cell>
                            </u-cell-group>
                            <view @tap="sceneShow=!sceneShow" class="padding-tb-sm u-border-top">
                                场景筛选
                            </view>
                            <u-cell-group v-if="sceneShow">
                                <u-cell v-for="(itm,idx) in item.scene" :title="itm.tname" isLink></u-cell>
                            </u-cell-group>
                        </view>
                    </view>
                </view>
            </u-popup>
        </view>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    // condition:{ // 商品列表查询条件对象
                    //     bcid:1,
                    // },
                    cfylist:[],
                    sceneShow:false,
                    listShow:false,
                    show: false,
                    glist: [],
                    page: 0,
                    tabArr: [{
                            name: '分类',
                            bcid: '',
                            target: ''
                        },
                        {
                            name: '蛋糕',
                            bcid: '1',
                            target: '/pages/cake'
                        },
                        {
                            name: '面包',
                            bcid: '11',
                            target: '/pages/bread'
                        },
                        {
                            name: '小食',
                            bcid: '6',
                            target: '/pages/food'
                        },
                        {
                            name: '购物车',
                            bcid: '',
                            target: '/pages/cart'
                        }
                    ]
                }
            },
            computed:{
                num(){
                    return this.$store.state.count.num
                },
                condition(){
                    return this.$store.state.condition.cond
                }
            },
            methods: {
                handleDetail(idx) {
                    console.log(idx);
                    uni.navigateTo({
                        url: '../detail/detail?idx=' + idx
                    })
                },
                loadData() {
                    let skip = this.page * 8
                    let wh = JSON.stringify(this.condition)
                    let url = `/1.1/classes/goods?where=${wh}&limit=8&skip=${skip}`;
                    this.$get(url).then(res => {
                        uni.stopPullDownRefresh()
                        let {
                            results
                        } = res
                        if (results.length) {
                            this.page++
                            this.glist = [
                                ...this.glist,
                                ...res.results
                            ]
                            return
                        }
                        uni.showToast({
                            title: '这回真没了...',
                            icon: 'none'
                        })
                    })
                },
                handleTab(item) {
                    let {
                        bcid,
                        target
                    } = item
                    if (bcid) {
                        this.glist = []
                        this.page = 0
                        // this.condition.bcid = Number(bcid)
                        this.$store.commit('changeCondition',{
                            bcid:Number(bcid)
                        })
                        this.loadData()
                    }
                    if (!bcid && !target) {
                        this.show = true
                    }
                },
                handleClose(){
                    this.show = false
                }
            },
            onLoad() {
                this.loadData()
                
                this.$get('/1.1/classes/classify').then(res=>{
                    console.log(res)
                    this.cfylist = res.results
                })
            },
            onReachBottom() {
                console.log('触底了');
                this.loadData()
            },
            onPullDownRefresh() {
                this.glist = []
                this.page = 0
                this.loadData()
            }
        }
    </script>
    
    <style lang="scss">
    page {
        padding-top: 100upx;
        padding-bottom: 120upx;
    }
    
    .cont {
        display: flex;
        flex-wrap: wrap;
        padding: 15upx;
        justify-content: space-between;
    }
    
    .fixed {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        box-shadow: 0 0 10upx 2upx rgba(0, 0, 0, 0.2);
    }
    .cu-bar{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 2;
    }
    .pop-cont{
        width: 400upx;
        margin-top: 200upx;
    }
    </style>

condition.js

export default {
        state(){
            return {
                cond:{ //商品列表查询条件对象
                    bcid:1
                }
            }
        },
        mutations:{
            // obj 是新的条件对象
            changeCondition(state,obj){
                state.cond = obj
            }
        }
    }

count.js

export default {
        state(){
            return {
                num:100
            }
        }
    }

index.js

import Vue from "vue"
    import Vuex from "vuex"
    import count from './count.js'
    import condition from './condition.js'
    Vue.use(Vuex)
    const store = new Vuex.Store({
        // 定义状态对象
        // state:{
        //     num:100
        // }
        modules:{
            count,
            condition
        }
    })
    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

[c9f06bfc6f474ca3b5e37e6bb53d41ef.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/0401ae0446c4406b8306c198a66d78c6.png