重庆制作网站培训,二维码转短链接生成器,工商局网站查询入口,百度竞价排名点击软件踩坑日记 《正确的使用Vuex》基于 uniapp Vue3 setup 语法糖 vuex4 项目 太多坑了要吐了 完美解决页面数据不刷新 或者数据慢一步刷新 页面使用html
templateviewtemplate v-ifcartData.data.length0!-- 自定义导航栏 --…踩坑日记 《正确的使用Vuex》基于 uniapp Vue3 setup 语法糖 vuex4 项目 太多坑了要吐了 完美解决页面数据不刷新 或者数据慢一步刷新 页面使用html
templateviewtemplate v-ifcartData.data.length0!-- 自定义导航栏 --view classbox-bg stylefont-size: 36rpx;!-- uni-nav-bar shadow left-iconleft right-iconcart title购物车 / --uni-nav-bar shadow fixedtrue left-iconleft :right-textisEdit?完成:编辑 title购物车statusBartrue clickRightisEdit!isEdit //view!-- 商品内容 --view classshop-infoview classshop-item v-for(items, index) in cartData.data :keyindexlabel classradioradio value color#F33 tapselectedItemOne(index) :checkeditems.checked /text/text/labelimage classshop-image :srcitems.imgUrl mode/image!-- 文字 --view classshop-textview classshop-name{{items.name}}/viewview classshop-color f-color颜色{{items.color}}/viewview classshop-price-numview classshop-price{{items.nprice}}/viewview classshop-numx {{items.num}}/view/view/view/view/view!-- 底部内容 --view classshop-footlabel classfoot-radio{{checkedall.data}}radio value color#F33 tapcheckAllFunc :checkedcheckedall.data /text全选/text/labelview classfoot-textview classfoot-centerview classfoot-count合计:span classf-active-color0/spanview classfoot-tips不包含运费/view/view/viewview classfoot-num结算(0)/view/view/view/templatetemplate v-else!-- 自定义导航栏 --view classbox-bg stylefont-size: 36rpx;!-- uni-nav-bar shadow left-iconleft right-iconcart title购物车 / --uni-nav-bar statusBartrue fixedtrue title购物车 //viewviewimage classshop-info-else src../../static/cartImage/isNull.png/image/view/template/view
/templatejavascript
script setupimport {ref,reactive,computed,} from vueimport {useStore} from vueximport store from /store/index.js// 购物车商品数据const cartData reactive({data: computed(() {return store.state.cart.cartData})})console.log(cartData.data);// 全选const checkAllFunc () {store.dispatch(checkAllFunc)}// 获取全选状态const checkedall reactive({data: computed(() {return store.getters[checkedAll]})})// 全选const selectedItemOne (index) {store.commit(oneCheck, index)}// 编辑 or 确定const isEdit ref(false)
/scriptstore index.js
import { createStore } from vuex
import cart from /store/modules/cart.js
export default createStore({modules: {cart,}
})store modules cart.js
const getDefaultState () {return {// token: getToken(),cartData: [{checked: false,id: 1,name: 正版护奶裙日系jk制服套装显瘦学院风甜美背带连衣裙夏季中长裙子甜美背带连衣裙夏季中长裙,color: 哈哈短会十大,imgUrl: ../../static/shopImage/shopInfo/jk02.png,nprice: 999,num: 1,},{checked: false,id: 2,name: 正版护奶裙日系jk制服套装显瘦学院风甜美背带连衣裙夏季中长裙子甜美背带连衣裙夏季中长裙,color: 哈哈短会十大,imgUrl: ../../static/shopImage/shopInfo/jk02.png,nprice: 99,num: 2,},{checked: false,id: 3,name: 正版护奶裙日系jk制服套装显瘦学院风甜美背带连衣裙夏季中长裙子甜美背带连衣裙夏季中长裙,color: 哈哈短会十大,imgUrl: ../../static/shopImage/shopInfo/jk02.png,nprice: 990,num: 1,},{checked: false,id: 4,name: 正版护奶裙日系jk制服套装显瘦学院风甜美背带连衣裙夏季中长裙子甜美背带连衣裙夏季中长裙,color: 哈哈短会十大,imgUrl: ../../static/shopImage/shopInfo/jk02.png,nprice: 990,num: 1,},{checked: false,id: 5,name: 正版护奶裙日系jk制服套装显瘦学院风甜美背带连衣裙夏季中长裙子甜美背带连衣裙夏季中长裙,color: 哈哈短会十大,imgUrl: ../../static/shopImage/shopInfo/jk02.png,nprice: 990,num: 1,},],selectList: []}
}const state getDefaultState()
const getters {// 判断是否全选checkedAll(state) {return state.cartData.length state.selectList.length;}
}
const mutations {// 全选checkAll(state) {state.selectList state.cartData.map(v {v.checked true;return v.id})},// 不全选unCheckAll(state) {state.cartData.forEach(v {v.checked false;})console.log(state.cartData);state.selectList [];},// 单选oneCheck(state, index) {let id state.cartData[index].id; // 查询 原数组 idlet res state.selectList.indexOf(id); // 原数组的 id 是否存在于空数组 res 返回存在位置if (res -1) {state.cartData[index].checked false;return state.selectList.splice(res, 1);}state.cartData[index].checked true;state.selectList.push(id);;}
}
const actions {checkAllFunc({commit,getters}) {getters.checkedAll ? commit(unCheckAll) : commit(checkAll)}
}export default {state,getters,mutations,actions
}main.js
import App from ./App// #ifndef VUE3
import Vue from vue
import ./uni.promisify.adaptor
import { createApp } from vue
import store from store/index.js
const app createApp(App)
app.use(store).mount(#app)
// Vue.config.productionTip false
// #endif// #ifdef VUE3
import {createSSRApp
} from vue
export function createApp() {const app createSSRApp(App)return {app}
}
// #endif
