如何使用vue3 + pinia共享操作数据

最新推荐文章于 2024-07-23 12:36:06 发布
最新推荐文章于 2024-07-23 12:36:06 发布
阅读量91 收藏
点赞数
文章标签： 前端 css javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50478723/article/details/133743294
版权

首先应该了解pinia 是什么用来干什么的  与vuex有什么差别   作者在这儿就不解释了 可自行百度 

作者来简单的演示一遍vue3中 pinia的使用操作

1首先来安装 pinia 

npm install -s pinia

2  在main.js全局注册 pinia

3 创建 stroes 文件夹  写入如下代码

4 页面中使用

前端小啊giao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3-使用Pinia共享数据
qq_45811054的博客
05-18 1091
vue3-使用Pinia共享数据
vue3中使用pinia实现数据共享
qq_46617584的博客
02-07 908
vue3中使用pinia实现数据共享
Vue利用pinia来完成组件之间的数据共享，可持续化存储要点总结和部分代码
qq_52840130的博客
01-23 1067
/需要注意的是mapState和 mapActions都需要...的写法才可以用，并且mapState是在computed里面写，mapActions是在methods里面写,所以这里的'count','doublecount'代表传递的数值，'add','minus','asyncadd'代表传递的方法。//然后还需要注意的就是对应的数据和逻辑代码（js代码)的书写，下面代码这里的state和vue里面data类似,getters和computed类似, actions和methods类似。
Vue3中的pinia使用（收藏版）
热门推荐
weixin_57677300的博客
12-08 2万+
pinia官方文档Pinia 的优点更多查看文档… 在main.js中引入pinia并创建容器挂载到根实例上 创建stores文件夹和index.js文件（这个文件以后基本不用管了） 在stores文件夹下创建counter.js文件。这个文件就是存有关counter相关的数据。（类似vuex的模块化） defineStore 是需要传参数的， 然后再组件中使用： 运行效果： 可以用vue3的调试工具看pinia案例需求，点击按钮加一： 一个不解构，一个不解构看看区别。 运行结
搭建 Vite + Vue3 + Pinia + Element Plus 项目。
~~~
08-03 936
搭建 Vite项目，Pinia 以及 Element Plus 的安装使用。
Vue3+Pinia+数据持久化 20分钟快速上手
奔跑吧代码
03-22 675
vue3+Pinia+数据持久化 20分钟快速上手
vue中使用Pinia vue3+Pinia
icpink_的博客
02-21 329
伴随到vue3的升级，官方已经用。
vue3+pinia+vuerouter4动态路由菜单
学如逆水行舟，不进则退！
09-12 8768
最近在做一个通用后台管理系统的框架，通过用户登录拿取用户的权限和菜单列表数据来动态添加路由，使不同用户的显示不同左侧菜单列表。这篇文章主要是讲述通过vue3+router+pinia技术栈设置动态路由菜单。
Vue3+Pinia+Vite+TS 还原高性能外卖APP项目 3️⃣项目搭建及前期准备
不乱来的嫖客
03-05 1800
使用vite创建 vue3项目，项目搭建及前期准备
vue3+pinia 面向app项目
04-13
Vue3 是 Vue.js 的最新...通过阅读和分析这些文件，你可以深入了解如何将 Vue3、Pinia、Vant、Axios 和 Vue Router 结合使用来构建一个完整的移动应用项目。同时，这也可以作为学习和实践 Vue3 全新特性的良好实例。
vue3+vite+pinia+axios+mock+ElementPlus：登录，动态路由，存储，网络 js非ts纯前端
09-25
总的来说，这个项目是使用Vue3作为基础框架，结合Vite作为构建工具，用Pinia管理应用状态，axios负责网络请求，Mock提供模拟数据，Element Plus用于构建UI界面。这样的组合为开发者提供了一个高效、便捷的前端开发...
基于vue3+vue router+pinia+vant的H5旅游租房项目源码.zip
10-27
项目源码ek-trip-main包含了这个旅游租房应用的所有代码文件，开发者可以通过查看源码来学习如何在Vue3环境下整合Vue Router、Pinia和Vant。这包括但不限于以下内容： 1. **项目结构**：了解项目的目录结构，如src...
vue后台管理系统-基于vite+vue3+pinia+element+ts实现的后台管理系统.zip
04-04
它可以轻松地在组件之间共享和更新数据，同时支持在不同环境（如服务器端渲染或测试）中使用。 Element UI 是一套基于 Vue2 的组件库，主要用于构建企业级后台界面。尽管此项目使用的是 Element Plus（Element UI ...
vue3整合pinia案例
12-14
在这个"vue3整合pinia案例"中，我们将深入探讨如何将Pinia集成到Vue3项目中，以及如何利用它来实现多个Vue页面的数据共享。 首先，让我们理解Vue3和Pinia的基础知识。Vue3引入了Composition API，这是一个强大的...
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 177
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 971
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 110
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
Odoo Registry 源码解读：前端世界的魔法师
最新发布
清水欧度 Odoo ERP
07-23 848
它是连接不同模块的桥梁，是实现灵活扩展的关键，是每个Odoo开发魔法师最强大的盟友。下次当你在编写Odoo模块时，请记住，你手中握着的不仅仅是键盘，而是Registry赋予你的魔法杖。想象一下，它就是Odoo世界里的预言球，所有的秘密都逃不过它的法眼。Registry会用它的魔法排序棒，确保每个生物都按照正确的顺序出场，场面蔚为壮观。Registry会把常用的魔法结果记在它的魔法笔记本里，下次再用时就不用重新计算了，节省了大量的魔法能量。Registry设置了强大的防御魔法，确保没有人能破坏它的魔法秩序。
Vite +vue3+pinia
05-26
Vue 3是一款流行的JavaScript框架，它提供了现代的响应式数据绑定，强大的组件化系统，以及更好的性能。Pinia是一个基于Vue 3的状态管理库，它提供了简单且强大的API，使得状态管理变得更加容易和直观。将这三个工具...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值