vue之pinia

最新推荐文章于 2024-05-30 19:26:14 发布
最新推荐文章于 2024-05-30 19:26:14 发布
阅读量1.8k 收藏 1
点赞数 1
分类专栏： vue vue3.0 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yjnain3066/article/details/127354888
版权
vue 同时被 2 个专栏收录
17 篇文章 1 订阅
订阅专栏
vue3.0
5 篇文章 0 订阅
订阅专栏

一、什么是pinia？

pinia是一个用于vue的状态管理库，类似于vuex,是vue的另一种状态管理工具

二、pinia的优缺点

1. Pinia的优点

  • 完整的 TypeScript 支持：与在 Vuex 中添加 TypeScript 相比，添加 TypeScript 更容易
  • 极其轻巧(体积约 1KB)
  • store 的 action 被调度为常规的函数调用，而不是使用 dispatch 方法或 MapAction 辅助函数，这在 Vuex 中很常见
  • 支持多个Store
  • 支持 Vue devtools、SSR 和 webpack 代码拆分

2. Pinia的缺点

  • 不支持时间旅行和编辑等调试功能

三、pinia和vuex的区别

  • pinia它没有mutation,他只有state，getters，action【同步、异步】使用他来修改state数据
  •  pinia他默认也是存入内存中，如果需要使用本地存储，在配置上比vuex麻烦一点
  •  pinia语法上比vuex更容易理解和使用，灵活。
  •  pinia没有modules配置，没一个独立的仓库都是definStore生成出来的
  •  pinia state是一个对象返回一个对象和组件的data是一样的语法

四、pinia的使用方法

  1. 首先在项目里面打开cmd命令行输入npm install pinia

     2. 安装完成我们可以在项目package.json文件里面看到

        

       这样就代表安装成功了

       3. 然后在mian.js文件夹下引入一下就好了

        4. 然后在src文件夹下创建store文件夹再在这个文件夹下创建一个index.js文件在index.js

            文件下创建pinia模块数据等等

5. 然后再你需要的项目进行引入即可

这里要注意你引入的模块要和你在store里面起的名字要一样（可以创建多个模块

无人与我粥可温
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
pinia-vue3-example:使用vue-next和pinia @ next的示例
05-13
Pinia的Vue 3示例 用法 yarn yarn dev 然后使用检查。 有关的
vue-pinia 示例代码
10-08
Vue Pinia 是 Vue 3 的官方状态管理库，它是 vuex 的现代化替代品，旨在简化状态管理并更好地融入 Vue 3 的新特性。 在 Vue Pinia 中，状态管理的核心概念是“store”。一个 store 是一个包含应用状态的地方，你...
vue之Pinia
Wdasdasda的博客
09-23 322
Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。在深入研究核心概念之前，我们得知道 Store 是用定义的，它的第一个参数要求是一个独一无二的// 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`，`useCartStore`，`useProductStore`)// 第一个参数是你的应用中 Store 的唯一 ID。// 其他配置...})
Pinia：全新的Vue状态管理库，Vuex的代替者
最新发布
molii_的博客
05-30 1716
总得来说，Pinia 就是 Vuex 的替代版，可以更好的兼容 Vue2，Vue3以及TypeScript。在Vuex的基础上去掉了 Mutation，只保留了 state, getter和action。Pinia拥有更简洁的语法， 扁平化的代码编排，符合Vue3 的 Composition api。
Vue使用Pinia
weixin_46019681的博客
10-13 1934
本文以vue3为例，讲解如何在项目中使用pinia以及pinia的一些相关知识点
关于vue中的Pinia的介绍
m0_59366938的博客
05-15 380
Pinia是vue的专属状态库，允许开发者跨组件或页面共享状态，他是一个拥有组合式API的Vue状态管理库，支持vue2和vue3，有三个概念，state、getter 和 action，我们可以假设这些概念相当于组件中的 data、 computed 和 methods。与 Vue 组合式 API 的 Setup 函数相似，我们可以传入一个函数，该函数定义了一些响应式属性和方法，并且返回一个带有我们想暴露出去的属性和方法的对象。最简单的例子是通过返回一个对象将一个静态属性添加到所有 store。
Vue3中使用pinia
看见小狮子没
09-22 1万+
当我们接收到pinia数据且对其数据进行了大量修改又想还原时，调用此方法就可以将接收的pinia数据全部重置还原。箭头函数的使用：(ps:虽然鼓励但是依然提供了非es6玩家的使用方式 内部可以用this代表state)说明成功修改了pinia里面的数据，且界面刷新证明这种直接修该pinia数据的方式依然是响应式数据。在pinia中没有提供mutaion 因为Actions就够了(它可以异步同步的统一修改状态)中的store是自己设定的接收变量，重点是。在之前的案例中修改了pinia的name属性值。
Vue3+Vite+TypeScript+Ant Design Vue+Pinia等主流技术的后台管理系统项目.zip
01-03
Vue3+Vite+TypeScript+Ant Design Vue+Pinia是一个现代前端开发的组合，用于构建高效、可维护的后台管理系统。这个项目充分利用了这些技术的优势，提供了丰富的功能和优化的开发体验。以下是对这些技术及其在后台...
uniapp+vue3+pinia框架（模块化+持久化存储）
06-15
在uniapp+vue3+pinia的场景下，使用Pinia的持久化插件，可以将store中的数据自动同步到本地存储，当应用重新加载时，可以恢复之前的状态，提高用户体验。需要注意的是，持久化存储应合理处理数据大小限制和用户隐私...
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
04-10
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip ## 简介 vue-element-perfect 是一个后台前端解决方案,它使用了最新的前端技术栈、动态路由，权限验证，并且有着丰富的组件,企业级中后台解决...
vue3整合pinia案例
12-14
在这个"vue3整合pinia案例"中，我们将深入探讨如何将Pinia集成到Vue3项目中，以及如何利用它来实现多个Vue页面的数据共享。 首先，让我们理解Vue3和Pinia的基础知识。Vue3引入了Composition API，这是一个强大的...
vue-tsx:Vite + Vite上的Vue + TSX（与Pinia一起使用）
04-08
Vue 3 +打字稿+ Vite 该模板将帮助您开始在Vite中使用Vue 3和Typescript进行开发。 推荐的IDE设置 + 。 确保在设置中启用vetur.experimental.templateInterpolationService ！ 如果使用[removed] 是当前处于RFC阶段的功能。 要获得语法的正确IDE支持，请使用而不是Vetur（并禁用Vetur）。 TS中.vue导入的类型支持 由于TypeScript无法处理.vue导入的类型信息，因此默认情况下将它们.vue为通用Vue组件类型。 在大多数情况下，如果您真的不在乎模板之外的组件prop类型，那么这很好。 但是，如果您希望在.vue导入中获取实际的道具类型（例如，在使用手动h(...)调用时获取道具验证），则可以使用以下代码： 如果使用手掌 运行Volar: Switch TS Plug
vue使用pinia (vue2/vue3)
^_^
09-23 7330
​inia是什么？Pinia 是 Vue.js 的轻量级状态管理库 官方网站：Pinia 中文文档: 介绍 | Pinia 中文文档 pinia与vuex4 相同 是vue 官方 状态管理工具(作者是 Vue 核心团队成员） 是vue开发者工具支持pinia 不同 pinia相比vuex4，对于vue3的 兼容性 更好 pinia相比vuex4，具备完善的 类型推荐 => 对 TS 支持很友好 Pinia 的 API 设计非常接近 Vuex 5 的提案。 vuex只能有一个根级别的状态,
Vue3中的pinia使用（收藏版）
热门推荐
weixin_57677300的博客
12-08 2万+
pinia官方文档Pinia 的优点更多查看文档… 在main.js中引入pinia并创建容器挂载到根实例上 创建stores文件夹和index.js文件（这个文件以后基本不用管了） 在stores文件夹下创建counter.js文件。这个文件就是存有关counter相关的数据。（类似vuex的模块化） defineStore 是需要传参数的， 然后再组件中使用： 运行效果： 可以用vue3的调试工具看pinia案例需求，点击按钮加一： 一个不解构，一个不解构看看区别。 运行结
vue新一代的状态管理器之pinia
Zhooson的博客
03-15 3254
Pinia简介 Pinia 是 Vue 新一代的轻量级状态管理库，相当于Vuex，也是Vue核心团队推荐的状态管理库。 同时支持 Vue2 和 Vue3，未来很有可能替代Vuex，比Vuex更容易上手。 特性 Pinia具有以下几点特性： 直观，像定义components一样地定义 store 完整的Typescript支持 去除 mutations，只有 state，getters，actions actions支持同步和异步 Vue Devtools支持Pinia，提供更好的开发体验 能够构建多个 s
vue3 Pinia详解使用详解
@必意玲
04-11 1243
通过创建数据仓库vuex 中的 state 在 pinia 中可以引用ref和reactive创建响应式数据vuex 中的getters在 pinia 中可以引用computed创建计算属性vuex 中的mutations和actions在 pinia 中就是普通函数, 同步异步都可以。
Vue3中使用Pinia详解
九仞山的专栏
06-12 2万+
详细介绍了Vue3中使用Pinia做全局状态管理的使用
Vue状态管理--Pinia使用详解
qq_44749491的博客
10-09 7921
pinia的使用详解
Vue最新状态管理工具Pinia——彻底搞懂Pinia是什么
XSL_HR的博客
05-06 1450
一篇文章带你了解pinia的相关概念和优势
vue3pinia使用
05-12
Vue3 Pinia是一个基于Vue3的状态管理库，它提供了类似于Vuex的全局状态管理能力，同时使用起来更加简单方便。下面是Vue3 Pinia的使用步骤： 1. 安装Vue3 Pinia 你可以使用npm或者yarn安装Vue3 Pinia： ``` npm install pinia ``` 或者 ``` yarn add pinia ``` 2. 创建Pinia Store 你需要创建一个store来管理你的状态。一个store就是一个拥有状态和操作状态的对象。下面是一个例子： ``` import { defineStore } from 'pinia' export const useCounterStore = defineStore({ id: 'counter', state: () => ({ count: 0 }), actions: { increment() { this.count++ } } }) ``` 这个例子中，我们创建了一个名为useCounterStore的store，它拥有一个状态count，初始值为0，并且有一个操作increment，用来增加count的值。 3. 在Vue组件中使用Store 你可以在Vue组件中使用createPinia函数创建一个Pinia实例，并通过inject注入到组件中。然后就可以通过store来获取状态和操作状态了。下面是一个例子： ``` <template> <div> <p>{{ count }}</p> <button @click="increment">+1</button> </div> </template> <script> import { defineComponent, inject } from 'vue' import { useCounterStore } from './store' export default defineComponent({ setup() { const store = useCounterStore() const count = computed(() => store.count) const increment = () => { store.increment() } return { count, increment } } }) </script> ``` 这个例子中，我们通过useCounterStore函数来获取useCounterStore实例，并且通过computed函数来获取count的值。然后我们在increment函数中调用store的increment方法。 4. 相关问题： 1. Vue3 Pinia与Vuex有什么区别？ 2. 如何在多个组件之间共享状态？ 3. Vue3 Pinia如何处理异步操作？ 4. Vue3 Pinia如何处理模块化？

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

无人与我粥可温

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值