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实现,显示完全不透明。

 

posted @   小超和你  阅读(291)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示