-
uniapp 学习笔记十七 vuex的模块化拆分,state和mutations结合实践
uniapp 学习笔记十七 vuex的模块化拆分,state和mutations结合实践
通过状态机来设置查询条件对象
通过mutationgs来改变状态机对象的值
cake.vue
- <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
- 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
-
相关阅读:
CarSim仿真快速入门(十八)-CarSim2021中的混合动力和纯电动系统
电力系统机组组合优化调度（IEEE14节点、IEEE30节点、IEEE118节点）（Matlab代码实现）
【JavaEE】多线程案例-定时器
第十三章 配置任务管理器电子邮件设置
爬虫使用Selenium生成Cookie
JAVA【设计模式】命令模式
RUST持续学习 一点borrow问题的心得记录
如何查看网络下发的能力中是否支持ims
怎么有效地进行问卷发放？
使用设计模式来增强你的 SpringBoot 开发
- 原文地址：https://blog.csdn.net/gixome/article/details/126597410