vue3中Pinia的使用总结

简介: vue3中Pinia的使用总结

pinia总结


Pinia是一个全新的Vue状态管理库,是Vuex的代替者,尤雨溪强势推荐。也就是说vuex的下一代vuex5就是pinia。



  • 1、Vue2 和 Vue3 都能支持


  • 2、抛弃传统的 Mutation ,只有 state, getter 和 action ,简化状态管理库


  • 3、不需要嵌套模块,符合 Vue3 的 Composition api,让代码扁平化


  • 4、TypeScript支持


  • 5、代码简介,很好的代码自动分割



与vuex对比


重置store


vuex


1.页面刷新: window.location.reload()
2.自定义重置方法

pinia


const userStore = useUserStores()
userStore.$reset()

数据持久化


数据持久化在很多场景下是很重要的,vuex就没有数据持久化。对于react来说,它有数据持久化库。当然pinia也有数据持久化能力,也就是下面库


import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
createApp(App).use(pinia);


模块开启持久化


const useHomeStore = defineStore("home",{
  
  // 开启数据持久化
  persisttrue
  // ...省略
});

灵活度


pinia可以很方便的模块化使用。


pinia可以全局store添加属性、状态、方法,也可以独立轻松添加,各store模块轻松互通。


typescript


习惯ts之后,你会发现没有ts是很难受的一件事情,刚好pinia更好的支持了ts。



pinia体积更小、更容易理解、更简单。


相关文章
|
4天前
|
JavaScript 前端开发
在Vue2或Vue3中项目中使用 Isotope(同位素) 过滤和排序神奇的布局神器,全网独家实现!
本文介绍了在Vue2或Vue3项目中如何使用Isotope(同位素)布局库来创建动态的网格布局,并提供了详细的代码实现和效果展示,包括过滤和排序功能。
12 0
在Vue2或Vue3中项目中使用 Isotope(同位素) 过滤和排序神奇的布局神器,全网独家实现!
|
4天前
|
前端开发 JavaScript API
基于Vue3+Hooks实现4位随机数和60秒倒计时
本文介绍了如何在Vue3中使用Hooks API来实现生成4位随机数和执行60秒倒计时的功能,并提供了详细的代码示例和运行效果展示。
22 1
基于Vue3+Hooks实现4位随机数和60秒倒计时
|
4天前
|
数据可视化 JavaScript
Vue3项目使用G6可视化组件实现一个树形机构图
在Vue 3项目中使用G6可视化组件库实现树形机构图的构建和展示。
37 1
Vue3项目使用G6可视化组件实现一个树形机构图
|
3天前
|
JavaScript 算法 API
Vue 3有哪些新特性
【8月更文挑战第16天】Vue 3有哪些新特性
20 1
|
4天前
|
JavaScript UED
如何在Vue3项目中使用防抖节流技巧
在Vue 3项目中使用防抖和节流技巧以优化组件性能,包括使用`lodash`库和自定义实现这两种方法。
9 0
如何在Vue3项目中使用防抖节流技巧
|
4天前
|
前端开发 JavaScript
基于Vue3实现鼠标按下某个元素进行拖动,实时改变左侧或右侧元素的宽度,以及点击收起或展开的功能
本文介绍了如何在Vue3项目中实现一个鼠标拖动调整元素宽度的功能,并展示了点击按钮收起或展开侧边栏的效果,提供了完整的实现代码和操作演示。
53 0
基于Vue3实现鼠标按下某个元素进行拖动,实时改变左侧或右侧元素的宽度,以及点击收起或展开的功能
|
4天前
|
JavaScript
创建 Vue3 项目
创建 Vue3 项目
10 0
|
4天前
|
JavaScript
在Vue3+ElementPlus项目中使用具有懒加载的el-tree树形控件
在Vue 3和Element Plus项目中实现具有懒加载功能的el-tree树形控件,以优化大数据量时的页面性能。
12 0
|
4天前
|
JavaScript 前端开发
在Vue3+ElementPlus项目中实现一个简单的新增/移除行记录的小组件
在Vue 3和Element Plus项目中创建一个支持新增和移除行记录的简单表格组件。
29 0
|
4天前
在Vue3项目中使用 vue3-seamless-scroll 无缝滚动插件
本文介绍了如何在Vue3项目中使用`vue3-seamless-scroll`插件实现无缝滚动效果,并提供了详细的示例代码和运行效果。
91 0