Vue3 02 -- Pinia和项目起步
Pinia快速入门
简单来说,每个store都是一个功能模块,整个项目都是由模块构成的。
像一个仓库一样,避免了页面反复使用同一段代码的问题。
首先导入defineStore方法,用来定义store。
defineStore的第一个参数是counter固定的。
第二个参数是一个回调函数,里面写数据(state)、方法(action)和return
写的形式和vue3的格式一样。
注意,所有的数据和方法必须都要return出去才能够被调用。
组件使用的时候,首先import导入,需要设一个常量去接受这个Store,因为本质上来说,导出的是一个函数,必须用变量去接收。
接收的是个对象,可以正常通过“.”的方式去调用。
getters的作用,其实就是在store里定义响应式的计算属性的值。
用的和vue3一样的语法,就是通过调用computed函数返回变量。(本质是模拟vue3)。
异步的action和组件中完全一致,通过异步符号返回方法,用await得到结果。
storeToRefs的作用,其实是解构Store对象里的数据。因为如果要用对象里的数据每次都要通过点调用有些麻烦。
这里有个需要注意的点:
直接通过 = 号去解构,得到的数据并不是响应式的。
但是通过storeToRefs,得到的数据是响应式的,原理是因为,storeToRefs将其里面的数据用ref封装了。
方法可以直接通过 = 号去调用,这是因为方法本身就是静态的。
别名路径联想提示(方便编程)
这个别名联想提示,并不是说改变了路径的搜索方式,而是给予一个提示,不配置这一选项,@/ 。。。。依旧可以实现。
ElementPlus组件使用
在前端项目中,通用型组件使用组件库开发是很方便和效率的事情。
推荐使用自动导入,这样避免导入组件和use组件的冗余代码。
1、安装两款插件
2、把下列代码插入到你的 Vite
或 Webpack
的配置文件中
OK了
elementPlus主题定制
为什么要主题定制?
如果设计的页面和elementPlus默认的主题色存在冲突,可以通过定制主题来让页面效果更好。
采用scss变量替换方案对elementPlus进行主题定制。
1、安装sass
2、准备定制文件(设置自己希望的颜色)
3、在vite.config.js中自动导入定制式文件进行样式覆盖
OK了
配置axios
axios就是网络请求体,通过接口向后端接收数据
通常是配置一个axios实例,一个axios实例对应一个请求基地址。
返回了这个axios实例之后,在相应的数据方法时,只要写具体的url和method即可
图片资源和样式资源
scss文件想要应用,在main.js下引用就行。
scss文件自动导入
如右图,每次使用的时候都要导入,非常麻烦。
这样直接使用 ‘$’ 就能使用。
iconfont字体图标库
阿里的iconfont字体图标库提供了许多漂亮的图标,想要使用的时候可以拿过来用。
如何引用?
在index.html文件里
Layout一级导航渲染
1、之前我们写了一个http实例,设置了一个axios,并进行相关的配置。
2、根据接口文件封装接口函数
我们调用了http实例,然后在返回体中设置url和methods。
3、发送请求获取数据列表
这部分用pinia封装成一个store,防止出现重复请求。
将请求数据的方法异步一下,数据存在响应体的应用中。
return 出去数据和方法。
得到数据了之后,以后想用这里面的数据,直接拿到store变量,点出里面的数据就可以拿到了。
吸顶导航交互
1、安装vueUse,使用VueUse里面的方法。
2、导入useScroll方法,获取里面的y坐标。
3、当y坐标大于78的时候,显示吸顶导航。
展示隐藏的样式原理:
状态1: 将导航栏按Y轴方向上移自身的100%距离,然后显示透明。
状态2: 将变化清0,并把变化的过程改成线性的0.5s实现,显示完全不透明。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库