uniapp 学习笔记十七 vuex的模块化拆分,state和mutations结合实践
通过状态机来设置查询条件对象
通过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