欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 文旅 > 旅游 > “代驾”小程序查漏补缺

“代驾”小程序查漏补缺

2025/1/18 18:48:58 来源:https://blog.csdn.net/weixin_57141071/article/details/145137650  浏览:    关键词:“代驾”小程序查漏补缺

vue3&part

watch

官方文档:https://cn.vuejs.org/api/reactivity-core.html#watch

功能:侦听一个或多个响应式数据源,并在数据源变化时调用所给的回调函数。

watch(() => tabName.value,(val) => {appType.value = tabsList.value[val]?.idpaging.value.reload()},
)

watchEffect

官方文档:https://cn.vuejs.org/api/reactivity-core.html#watch

功能:立即运行一个函数,同时响应式地追踪其依赖,并在依赖更改时重新执行。

 学到这里的时候,在会去复习一下vue3的md文档(名字叫vue3快速上手)

computed

官方文档:响应式 API:核心 | Vue.js

功能:接受一个 getter 函数,返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。

// 计算选中单品列表
const selectedCartList = computed(() => {return cartList.value.filter((v) => v.selected)
})// 计算选中总件数
const selectedCartListCount = computed(() => {return selectedCartList.value.reduce((sum, item) => sum + item.count, 0)
})// 计算选中总金额
const selectedCartListMoney = computed(() => {return selectedCartList.value.reduce((sum, item) => sum + item.count * item.nowPrice, 0).toFixed(2)
})

store

官方文档:定义 Store | Pinia

功能:Pinia 是 Vue 的专属状态管理库,它允许你跨组件或页面共享状态。

import { defineStore } from "pinia"
import { ref } from "vue"export const useUserStore = defineStore("user",  //第一个参数 这个字符串 "user" 是 store 的唯一标识符(ID)。在 Pinia 中,每个 store 必须具有唯一的 ID,以便在应用中区分不同的 store。() => {   //第二个参数 store 的状态和方法const userInfo = ref<Partial<IUserInfo> | null>()const setUserInfo = (val: IUserInfo) => {userInfo.value = val}const clearUserInfo = () => {userInfo.value = null}// 一般没有reset需求,不需要的可以删除const reset = () => {userInfo.value = null}const isLogined = computed(() => !!userInfo.value?.jwt)return {userInfo,setUserInfo,clearUserInfo,isLogined,reset,}},{ //第三个参数 store 的配置选项persist: true,
// 用来配置是否将 store 的状态持久化到浏览器的 localStorage 或 sessionStorage},
)

Loash

官方文档:Lodash 简介 | Lodash中文文档 | Lodash中文网

防抖

官方文档:lodash.debounce | Lodash中文文档 | Lodash中文网

// 记得引入
import _ from "lodash"
// 使用 debounce 包装 getQuestion
const debouncedGetQuestion = _.debounce((value) => getQuestion(value), 300)
// 输入
const onChange = ({ value }) => {isQuestion.value = truevalue = value.trim()if (!value) {onClear()return}debouncedGetQuestion(value) // 使用封装后的函数
}
// 查询
const onSearch = ({ value }) => {isQuestion.value = truevalue = value.trim()if (!value) {onClear()keyword.value = ""return}debouncedGetQuestion(value) // 使用封装后的函数
}

 节流

官方文档:lodash.throttle | Lodash中文文档 | Lodash中文网

 uniapp的生命周期

官方文档:App.vue/App.uvue | uni-app官网

http&接口请求方法

 

// 分页查询常见问题列表
export const postQuestionList = (pageNum, pageSize, data) => {return http.post<questionListItem>(`/biz/question/questionList/${pageNum}/${pageSize}`, data)
}

 

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com